In this article, we’ll explore some CSS tricks that allow us to create a hover animation for revealing our images.
We might be thinking “Well, that’s an easy task! An extra element above the image that you animate and it’s done.” True, but we won’t use any extra element or pseudo-element. We’re going to work using only the <img> element. Nothing more!
It may sound impossible because, using only the image element, we can’t have something above it. Indeed, we won’t have something above it, but we will fake it!
Below is a CodePen demo of what we’re going to explore together.
See the Pen
A reveal hover effect with one element by Temani Afif (@t_afif)
on CodePen.
Cool, right? A reveal animation using only a few lines of code and no extra element. Follow me, and let’s dissect the magic behind the code.
The post How to Add a CSS Reveal Animation to Your Images appeared first on SitePoint.