How to Add a CSS Reveal Animation to Your Images

Cleverly use CSS to achieve image hovering and reveal animation effects without additional elements! This article will explore in-depth how to use only <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images "><code><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要点：

• 仅需<img alt="How to Add a CSS Reveal Animation to Your Images" >
• Core points: object-fit: coverobject-position: right
Only
• elements are needed to implement CSS reveal animations without any extra elements or pseudo-elements. object-fit: none
The key to animation is: add padding to the image, then gradually reduce it to zero when hovering, while using background colors to create the visual effect of the image being revealed. The

and

properties are used to maintain the aspect ratio of the picture and prevent the picture from moving during animation. <img alt="How to Add a CSS Reveal Animation to Your Images" > By adjusting the padding direction, you can expand the animation effect and create more changes. Properties can also create different effects in some configurations, but require the CSS width and height to match the inherent dimensions of the image.

This article will explore some CSS tips to help you create impressive picture hover animations. You might think, "It's simple! Just add an extra element above the picture to animation." That's true, but we won't use any extra elements or pseudo-elements, we can do it with just

elements! This may sound incredible because using only image elements, it seems that nothing can be added above it. Indeed, we don’t add anything above the picture, but we smartly simulate this effect! Here is a CodePen demo showing what we will explore together: CodePen demo link

Isn't it cool? Revealing animations can be achieved with just a few lines of code, no extra elements required. Let's dive into the mystery behind it.

<code class="language-css">img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}</code>

Initial configuration: widthheight aspect-ratioFirst, define the image size: box-sizing: border-box

So far, the code is very simple. For simplicity, we use square images, but we can also use pictures of any size. It is very important to explicitly set and , do not use

or retain the default size of the image. This is a must for our animation and we will explain why later. It is also very important to pay attention to the use of

. It has no effect at the moment, but let's move on to the next step and see why it is needed. box-sizing: border-box Add padding:

What happens if we add some padding to an image that has a fixed size defined and uses ? Let's give it a try! CodePen demo link

As we saw in the demo above, the picture was squeezed. We added 100px padding to the left, which will leave only 100px space for the image (content area). This is the effect of box-sizing: border-box. As MDN explains: border-box tells the browser to consider any borders and padding in the values ​​you specify for the width and height of the element. If you set the width of the element to 100 pixels, then that 100 pixels will contain any borders or fills you added and the content box will shrink to absorb the extra width.

Now, imagine a scene where padding equals width. Yes, the picture will disappear! In the demo below, hover over the image to view the results. CodePen demo link

In the above demonstration, there are two points to be paid attention to. The padding can be animated, which is cool, and we can also see the importance of the CSS variables used earlier when defining the image size. We used the same variable to define the padding, so we don't have to repeat the same value.

Add background color:

Let's take the previous example and add the background. CodePen demo link

We are starting to get closer to our goal. The background will logically cover the entire element. We can't see it below the picture (unless we use transparent pictures), but we can see it in the fill area. Our goal is to reveal the image, so let's start by adding the padding and then set it to 0 when hovering - the opposite of what we are currently doing. CodePen demo link

This is still not the effect we want, but we are getting closer and closer! We only need one ingredient to make our “fake” reveal animation perfect!

Add object-fit and object-position:

The missing part is to avoid the image being squeezed, and here is the final trick. We will use the object-fit and cover values. As MDN explains: Replace content resizes to maintain its aspect ratio while filling the entire content box of the element. If the aspect ratio of an object does not match the aspect ratio of its box, the object will be cropped to fit.

There are two important points here:

• "Replace content resizes to maintain its aspect ratio". This means that the picture will not be squeezed, but will maintain its inherent proportions. We are using a square picture, so it will keep the square.
• "Fill the entire content box of the element...will be cropped to fit". The image should fill all content areas (the area we reduce by adding some fill), but if it doesn't fit inside, we'll crop it.

Let's try it out in the demo below. CodePen demo link

Did you see it? The pictures are no longer squeezed! It maintains its proportions within the content area while we add/remove padding. OK, so we might think the effect is different from the initial presentation. The picture moves strangely. That's right. So now we turn to object-position. The default value is center, so the image will always be in the center of the content area and will be cropped to fit inside. That's why it moves with the animation. What we need to do next should be easy to predict. We will change the location to make sure the picture does not move. We will add padding from the left, so we should use object-position: right to pin the position of the image to the right. CodePen demo link

Our reveal animation is completed! We don't need any overlays or extra elements above the picture. By using simple background colors and some picture positioning tips, we achieved beautiful reveal animations with a small amount of simple code. We can easily update the direction by adjusting the fill direction and object-position. Here is the first demonstration from the previous one, which contains four directions. CodePen demo link

The following is the CSS we use:

<code class="language-css">img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}</code>

More animations revealed:

We can use the same idea to extend the trick to create more changes. Instead of adding/removing padding from one side, we can add/removing padding to both sides or even all sides. CodePen demo link

If we check the code demonstrated above, we will not find that there is a big difference from the previous one. All we did was set up different fill configurations to create more variations of the same effect. In the first and last examples, we use object-fit: none instead of object-fit: cover to have a trick. In these cases, the fill reduces the width and height of the content area to 0, while in all other cases we only reduce the height or width. In this configuration, cover does not work, but none can do the job. MDN notes: Replacement content will not resize.

Why don't we always use none? We can use it, and it works, but it has a small drawback. The inherent dimensions of the picture will be taken into account, so we have to make the CSS width and height equal to the inherent dimensions for the technique to take effect. On the other hand, only keeps the scale of the picture and will resize the picture to fit the box size, so we can safely define any CSS size for the picture. This is a comparison so that we can see the difference. noneCodePen demo link cover

In both cases we both reveal animations, but when using object-fit: none, the image does not resize and keeps its default size (500x500), which is not good. object-fit: cover Only maintain the proportion and the image will be resized to fit the box size.

Conclusion:

I hope you enjoyed this little CSS experiment. Using simple tricks and a few lines of code, we implemented a cool reveal animation with just the <img alt="How to Add a CSS Reveal Animation to Your Images" > element. We also made many changes using the same code structure. We can do more with this technique. I'll leave you with a last example where I convert a black and white image to a color image while hovering. CodePen demo link

I will let you continue to explore and try to find more beautiful animations!

The above is the detailed content of How to Add a CSS Reveal Animation to Your Images. For more information, please follow other related articles on the PHP Chinese website!