On this article, we’ll discover some CSS tips that let us to create a hover animation for revealing our pictures.

We may well be considering “Neatly, that’s a very easy process! An additional detail above the picture that you simply animate and it’s completed.” True, however we gained’t use any further detail or pseudo-element. We’re going to paintings the use of best the <img> detail. Not anything extra!

It should sound unimaginable as a result of, the use of best the picture detail, we will be able to’t have one thing above it. Certainly, we gained’t have one thing above it, however we will be able to faux it!

Under is a CodePen demo of what we’re going to discover in combination.

See the Pen
A expose hover impact with one detail by way of Temani Afif (@t_afif)
on CodePen.

Cool, correct? A expose animation the use of only some traces of code and no further detail. Observe me, and let’s dissect the magic in the back of the code.

The Preliminary Configuration

We’ll get started by way of defining the dimensions of the picture:

img {
  --s: 200px; 

  width: var(--s);
  top: var(--s);
  box-sizing: border-box;
}

Not anything complicated thus far. We’re the use of a sq. symbol for simplicity, however it may be a picture of any size. It’s vital to explicitly set width and top and now not use aspect-ratio or depart the default dimension of the picture. That is obligatory for our animation, and we’ll see why later.

Word the usage of box-sizing: border-box as neatly, which could also be vital. It has no impact for now, however let’s transfer to your next step to know why it’s wanted.

Including Some Padding

What’s going to occur if we upload some padding to a picture the place we’ve outlined a set size and we’ve used box-sizing: border-box? Let’s take a look at!

See the Pen
Untitled by way of Temani Afif (@t_afif)
on CodePen.

The picture is squished, as we will be able to see within the above demo. We upload 100px of padding at the left, which is able to depart best 100px of area for the picture (the content-area). That’s the impact of box-sizing: border-box.

As defined by way of MDN:

border-box tells the browser to account for any border and padding within the values you specify for a component’s width and top. In case you set a component’s width to 100 pixels, that 100 pixels will come with any border or padding you added, and the content material field will shrink to take in that further width.

Now, consider a state of affairs the place the padding is the same as the width. Sure, the picture will disappear! Within the demo under, hover over the picture and notice the end result.

See the Pen
Animating the padding by way of Temani Afif (@t_afif)
on CodePen.

There are two issues particularly to notice within the above demo. Padding can also be animated, which is cool, and we will be able to see the significance of the CSS variable we used in the past to outline the dimensions of the picture. We’ve used the similar variable to outline the padding, so we don’t have to copy the similar worth.

Including a Background Colour

Let’s take the former instance and upload a background to it.

See the Pen
Untitled by way of Temani Afif (@t_afif)
on CodePen.

We’re beginning to get someplace now. The background will logically duvet the entire detail. We don’t see it below the picture (except we use one with transparency), however we see it at the padding discipline.

Our function is to show the picture, so let’s get started by way of having the padding after which making it 0 on hover — the other of what we these days have.

See the Pen
Untitled by way of 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 aspect to make our “faux” expose animation very best!

Including object-fit and object-position

The lacking section is to keep away from the squishing of the picture, and right here comes the general trick. We’re going to make use of object-fit with the duvet worth.

As defined by way of MDN:

The changed content material is sized to take care of its factor ratio whilst filling the detail’s complete content material field. If the article’s factor ratio does now not fit the factor ratio of its field, then the article will likely be clipped to suit.

Two portions are vital right here:

• “The changed content material is sized to take care of its factor ratio”. Which means that the picture gained’t get squished however will stay its intrinsic ratio. We used a sq. symbol, so it’s going to stay sq..
• “filling the detail’s complete content material field … will likely be clipped to suit”. The picture will have to fill all of the content material discipline (the world we cut back by way of including some padding), but when it gained’t match within, we clip it.

Let’s do this within the following demo.

See the Pen
Untitled by way of Temani Afif (@t_afif)
on CodePen.

See that? The picture is not squished! It’s conserving its ratio throughout the content material discipline whilst we upload/take away the padding.

K, so we could also be considering that the impact isn’t the similar as within the preliminary demo. The picture is transferring surprisingly. True. So now we flip to object-position. The default worth is heart, so the picture will likely be focused within the content material discipline always and can get clipped to suit within. That’s why it strikes with the animation.

What we’ll do subsequent will have to be simple to expect. We’ll alternate the placement to verify the picture gained’t transfer. We’ll upload the padding from the left, so we will have to repair the placement of the picture to the fitting the use of object-position: correct.

See the Pen
Untitled by way of Temani Afif (@t_afif)
on CodePen.

Our expose animation is completed! We didn’t want any overlay or an additional detail above the picture. By way of the use of a easy background colour, together with some positioning tips for the picture, we get a posh expose animation with a small quantity of straightforward code.

We will be able to simply replace the course by way of adjusting the padding course and the object-position. Right here’s the primary demo from previous, which contains the 4 instructions.

See the Pen
A expose hover impact with one detail by way of Temani Afif (@t_afif)
on CodePen.

Right here’s the CSS we’re the use of:

img {
  --s: 200px; 

  width: var(--s);
  top: var(--s);
  box-sizing: border-box;
  object-fit: duvet;
  cursor: pointer;
  transition: .5s;
}

img.left {
  object-position: correct;
  padding-left: var(--s);
  background: #542437;
}

img.correct {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}

img.peak {
  object-position: backside;
  padding-top: var(--s);
  background: #E94E77;
}

img.backside {
  object-position: peak;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}

Extra Divulge Animations

We will be able to lengthen the trick to create extra permutations the use of the similar thought. As a substitute of including/eliminating the padding from one facet, we will be able to do it for 2 aspects and even either side.

See the Pen
A expose hover impact with one detail II by way of Temani Afif (@t_afif)
on CodePen.

If we check up on the code of the demo above, we gained’t in finding a large distinction from the former one. All that we’re doing is environment other padding configurations to create extra variation for a similar impact.

There’s one trick within the first and final instance the place we’re the use of object-fit: none as a substitute of object-fit: duvet. In the ones instances, the padding will cut back the width and the peak of the content material discipline to 0, whilst in all of the others instances, we both cut back the peak or width. In such configurations, duvet gained’t paintings, however none can do the process.

MDN states:

The changed content material isn’t resized.

Why aren’t we simply the use of none in all instances? We can use it, and it really works, however it has a small problem. none will believe the intrinsic size of the picture, so we’re obliged to have the CSS width and top equivalent to the intrinsic size for the trick to paintings. duvet, then again, assists in keeping best the ratio of the picture and can resize it to suit the world, so we will be able to safely outline any CSS dimension for the pictures.

Right here’s a comparability so we will be able to see the variation.

See the Pen
Untitled by way of Temani Afif (@t_afif)
on CodePen.

In each instances, we now have the expose animation, but if the use of object-fit: none, the picture isn’t resized and is conserving its default dimension (500x500), which isn’t excellent. object-fit: duvet is best conserving the ratio and can resize the picture to suit the field size.

Conclusion

I am hoping you loved this little CSS experiment. The use of easy tips and a couple of traces of code, we completed a groovy expose animation with best the <img> detail. We additionally did many permutations the use of the similar code construction.

We will be able to do much more with this trick. I’ll depart you with a final instance the place I turn out to be black and white pictures into coloured ones on hover.

See the Pen
Colour your symbol with a sliding hover impact by way of Temani Afif (@t_afif)
on CodePen.

I’ll permit you to proceed the exploration and take a look at to seek out extra fancy animations!