A reveal hover effect with a single element II
Adding more variations to the previous reveal animation using the same tricks
- No extra element (only the
<img>tag) - No pseudo-element
- Powered by object-fit & object-position
- A lot of possible combination
See the Pen A reveal hover effect with one element II by Temani Afif (@t_afif) on CodePen.
Related Article: www.sitepoint.com/css-image-reveal-animation
More CSS Tips
- Full screen slanted background Only 2 properties to create a slanted background that extends to the edge of the screen.
- An inner border-radius with one property Use a magic border-image trick to create an inner border-radius.
- A fancy hover effect with rotating squares Transform your image into little rotating squares with a fancy hover effect.
- A CSS-only Ribbon A simple code to create a fancy CSS Ribbon.