Mouseover/Hover Effect for Artifact Thumbnails

[jonfroehlich]

I quite like the following subtle hover effect that has become common on portfolio pages: you mouseover a thumbnail and it zooms the image (and sometimes does a slight darkening + text overlay).

See https://www.awwwards.com/websites/portfolio/ & vanschneider.com for demos of this effect.

Looks pretty easy to implement. My suggestion would be to have a css class like artifact-thumbnail-hover or something that can be used on any artifact thumbnail that we want like project thumbnails, talk thumbnails, paper thumbnails, etc.

[jonfroehlich]

I think this might be a good one for @lstearns86 to start with for Hackathon.

[lstearns86]

Here's an example of the new behavior:

You can add the class artifact-thumbnail-hover to any element that contains an image and it will zoom 20% on hover. I also added the artifact-overlay class which will add the dark overlay and the artifact-overlay-content class which sets the text and link color to white and positions it in the bottom left of the container.

[jonfroehlich]

Can you try:

• Increasing the font size
• Vertically and horizontally centering text
• Consider putting white rectangle (with rounded corners) around each text (e.g., to convey button and clickability)

[lstearns86]

Updated overlay link styles:

Or if there are too many for a single line (also showing link hover behavior):

How's that? Also, I assume that I should remove the redundant links below?

[jonfroehlich]

• More vertical and horizontal margin in each button
• No need to have opacity in button. Just make mouseover opacity for whole thumbnail dark enough that it is easy to read button text. Can you find some examples of this style of mouseover online and post them into this thread?
• What font are you using?

[lstearns86]

Do you mean the padding within the button (separating from the border)? Or the separation between the buttons?

I can keep looking, but I couldn't quickly find any examples that have the behavior you want. The link you provided initially is the closest I saw, with the arrow link in the bottom right.

I'm using the default font that we're using for text pretty much everywhere else.

[lstearns86]

How's this?

I increased the internal padding, got rid of the button background colors, and increased the overlay darkness to make the buttons more readable for light colored images.

[jonfroehlich]

Fixed in #325