On this article, we’ll discover some CSS tips that permit us to create a hover animation for revealing our photographs.
We is perhaps pondering “Nicely, that’s a straightforward process! An additional factor above the picture that you just animate and it’s accomplished.” True, however we received’t use any additional factor or pseudo-element. We’re going to work utilizing solely the <img> factor. Nothing extra!
It could sound inconceivable as a result of, utilizing solely the picture factor, we are able to’t have one thing above it. Certainly, we received’t have one thing above it, however we’ll pretend it!
Beneath is a CodePen demo of what we’re going to discover collectively.
See the Pen
A reveal hover impact with one factor by Temani Afif (@t_afif)
on CodePen.
Cool, proper? A reveal animation utilizing just a few traces of code and no additional factor. Observe me, and let’s dissect the magic behind the code.
The Preliminary Configuration
We’ll begin by defining the dimensions of the picture:
img {
--s: 200px;
width: var(--s);
peak: var(--s);
box-sizing: border-box;
}
Nothing complicated thus far. We’re utilizing a sq. picture for simplicity, however it may be a picture of any dimension. It’s necessary to explicitly set width and peak and never use aspect-ratio or depart the default measurement of the picture. That is necessary for our animation, and we’ll see why later.
Word using box-sizing: border-box as properly, which can be necessary. It has no impact for now, however let’s transfer to the subsequent step to know why it’s wanted.
Including Some Padding
What is going to occur if we add some padding to a picture the place we’ve outlined a hard and fast dimension and we’ve used box-sizing: border-box? Let’s strive!
See the Pen
Untitled by Temani Afif (@t_afif)
on CodePen.
The picture is squished, as we are able to see within the above demo. We add 100px of padding on the left, which is able to depart solely 100px of area for the picture (the content-area). That’s the impact of box-sizing: border-box.
As defined by MDN:
border-boxtells the browser to account for any border and padding within the values you specify for a component’s width and peak. In case you set a component’s width to 100 pixels, that 100 pixels will embody any border or padding you added, and the content material field will shrink to soak up that additional width.
Now, think about a scenario the place the padding is the same as the width. Sure, the picture will disappear! Within the demo under, hover over the picture and see the end result.
See the Pen
Animating the padding by Temani Afif (@t_afif)
on CodePen.
There are two issues particularly to notice within the above demo. Padding may be animated, which is cool, and we are able to see the significance of the CSS variable we used beforehand to outline the dimensions of the picture. We’ve used the identical variable to outline the padding, so we don’t must repeat the identical worth.
Including a Background Coloration
Let’s take the earlier instance and add a background to it.
See the Pen
Untitled by Temani Afif (@t_afif)
on CodePen.
We’re beginning to get someplace now. The background will logically cowl the entire factor. We don’t see it beneath the picture (until we use one with transparency), however we see it on the padding space.
Our aim is to disclose the picture, so let’s begin by having the padding after which making it 0 on hover — the alternative of what we presently have.
See the Pen
Untitled by Temani Afif (@t_afif)
on CodePen.
This nonetheless isn’t what we’re aiming for, however we’re getting nearer! We’re lacking just one ingredient to make our “pretend” reveal animation excellent!
Including object-fit and object-position
The lacking half is to keep away from the squishing of the picture, and right here comes the ultimate trick. We’re going to make use of object-fit with the cowl worth.
As defined by MDN:
The changed content material is sized to take care of its side ratio whereas filling the factor’s whole content material field. If the item’s side ratio doesn’t match the side ratio of its field, then the item will probably be clipped to suit.
Two elements are necessary right here:
- “The changed content material is sized to take care of its side ratio”. Which means the picture received’t get squished however will hold its intrinsic ratio. We used a sq. picture, so it can stay sq..
- “filling the factor’s whole content material field … will probably be clipped to suit”. The picture ought to fill all of the content material space (the realm we cut back by including some padding), but when it received’t match inside, we clip it.
Let’s do that within the following demo.
See the Pen
Untitled by Temani Afif (@t_afif)
on CodePen.
See that? The picture is not squished! It’s conserving its ratio contained in the content material space whereas we add/take away the padding.
Okay, so we could also be pondering that the impact isn’t the identical as within the preliminary demo. The picture is shifting surprisingly. True. So now we flip to object-position. The default worth is middle, so the picture will probably be centered within the content material space on a regular basis and can get clipped to suit inside. That’s why it strikes with the animation.
What we’ll do subsequent ought to be straightforward to foretell. We’ll change the place to ensure the picture received’t transfer. We’ll add the padding from the left, so we should always repair the place of the picture to the fitting utilizing object-position: proper.
See the Pen
Untitled by Temani Afif (@t_afif)
on CodePen.
Our reveal animation is finished! We didn’t want any overlay or an additional factor above the picture. Through the use of a easy background colour, together with some positioning tips for the picture, we get a flowery reveal animation with a small quantity of easy code.
We are able to simply replace the route by adjusting the padding route and the object-position. Right here’s the primary demo from earlier, which incorporates the 4 instructions.
See the Pen
A reveal hover impact with one factor by Temani Afif (@t_afif)
on CodePen.
Right here’s the CSS we’re utilizing:
img {
--s: 200px;
width: var(--s);
peak: var(--s);
box-sizing: border-box;
object-fit: cowl;
cursor: pointer;
transition: .5s;
}
img.left {
object-position: proper;
padding-left: var(--s);
background: #542437;
}
img.proper {
object-position: left;
padding-right: var(--s);
background: #8A9B0F;
}
img.high {
object-position: backside;
padding-top: var(--s);
background: #E94E77;
}
img.backside {
object-position: high;
padding-bottom: var(--s);
background: #7A6A53;
}
img:hover {
padding: 0;
}
Extra Reveal Animations
We are able to prolong the trick to create extra variations utilizing the identical concept. As an alternative of including/eradicating the padding from one aspect, we are able to do it for 2 sides and even all sides.
See the Pen
A reveal hover impact with one factor II by Temani Afif (@t_afif)
on CodePen.
If we examine the code of the demo above, we received’t discover a huge distinction from the earlier one. All that we’re doing is setting totally different padding configurations to create extra variation for a similar impact.
There’s one trick within the first and final instance the place we’re utilizing object-fit: none as a substitute of object-fit: cowl. In these instances, the padding will cut back the width and the peak of the content material space to 0, whereas in all of the others instances, we both cut back the peak or width. In such configurations, cowl received’t work, however none can do the job.
MDN states:
The changed content material shouldn’t be resized.
Why aren’t we simply utilizing none in all instances? We can use it, and it really works, nevertheless it has a small disadvantage. none will take into account the intrinsic dimension of the picture, so we’re obliged to have the CSS width and peak equal to the intrinsic dimension for the trick to work. cowl, then again, retains solely the ratio of the picture and can resize it to suit the realm, so we are able to safely outline any CSS measurement for the photographs.
Right here’s a comparability so we are able to see the distinction.
See the Pen
Untitled by Temani Afif (@t_afif)
on CodePen.
In each instances, we now have the reveal animation, however when utilizing object-fit: none, the picture isn’t resized and is conserving its default measurement (500x500), which isn’t good. object-fit: cowl is simply conserving the ratio and can resize the picture to suit the field dimension.
Conclusion
I hope you loved this little CSS experiment. Utilizing easy tips and some traces of code, we achieved a cool reveal animation with solely the <img> factor. We additionally did many variations utilizing the identical code construction.
We are able to do much more with this trick. I’ll depart you with a final instance the place I remodel black and white photographs into coloured ones on hover.
See the Pen
Coloration your picture with a sliding hover impact by Temani Afif (@t_afif)
on CodePen.
I’ll allow you to proceed the exploration and attempt to discover extra fancy animations!
