See the Pen Pure CSS Thumbnail Hover Effect by Ren Aysha (@rrenula) on CodePen

 
I remembered an old blog post by @Sohtanaka where he created a thumbnail hover effect with CSS and jQuery. I decided to replicate the same effect using CSS3, making it to Pure CSS without any JavaScript involve.

It uses good old CSS3 transitions and it is really simple:

1. Set CSS3 transitions on both the li element that holds the image and the image itself
2. Style the li element and the image by setting default width, height, and borders. The image should be absolutely positioned in its container (li element)
3. Ensure that the li element has a z-index property of 0
4. Use the :hover pseudo-class on both elements in order to add in hover effects
   • The :hover pseudo-class for the li element should have a z-index of 5 or higher. This is important in order to ensure that the hovered image will overlapped other images when hovered.
   • :hover pseudo-class of the image should have a larger width and height. In order to vertically align the image when hover, set the properties margin-top, margin-left, top, and left accordingly; play around with the values. Without tinkering with values of these properties, the effect will not look as good as it will look like the image is being enlarge from the top left rather than at the center point.

I am looking for other inspirations when it comes to hover image effect. Mainly, flash sites have unique animations on hover; would love to check out some of the effects and replicate it with CSS3. If you have any flash sites suggestions, please let me know through comments!