It uses good old CSS3 transitions and it is really simple:
- Set CSS3 transitions on both the li element that holds the image and the image itself
- 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)
- Ensure that the li element has a
z-indexproperty of 0
- Use the
:hoverpseudo-class on both elements in order to add in hover effects
:hoverpseudo-class for the li element should have a
z-indexof 5 or higher. This is important in order to ensure that the hovered image will overlapped other images when hovered.
:hoverpseudo-class of the image should have a larger width and height. In order to vertically align the image when hover, set the properties
leftaccordingly; 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!