• Previous CSS Tip
• Next CSS Tip

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
• An inner border-radius with one property
• Select all elemens between two class names
• A reveal hover effect with a single element
• A fancy hover effect with rotating squares
• A CSS-only Ribbon