- Css background image color overlay update#
- Css background image color overlay code#
All that we’re doing is setting different padding configurations to create more variation for the same effect.
Css background image color overlay code#
If we inspect the code of the demo above, we won’t find a big difference from the previous one. Instead of adding/removing the padding from one side, we can do it for two sides or even all sides.Ī reveal hover effect with one element II by Temani Afif ( CodePen. We can extend the trick to create more variations using the same idea. Here’s the first demo from earlier, which includes the four directions.Ī reveal hover effect with one element by Temani Afif ( CodePen.
Css background image color overlay update#
We can easily update the direction by adjusting the padding direction and the object-position. By using a simple background color, along with some positioning tricks for the image, we get a fancy reveal animation with a small amount of simple code.
Our reveal animation is done! We didn’t need any overlay or an extra element above the image. We’ll add the padding from the left, so we should fix the position of the image to the right using object-position: right.
We’ll change the position to make sure the image won’t move. What we’ll do next should be easy to predict. The default value is center, so the image will be centered in the content area all the time and will get clipped to fit inside. Okay, so we may be thinking that the effect isn’t the same as in the initial demo. See that? The image is no longer squished! It’s keeping its ratio inside the content area while we add/remove the padding. The image should fill all the content area (the area we reduce by adding some padding), but if it won’t fit inside, we clip it.
“filling the element’s entire content box … will be clipped to fit”. We used a square image, so it will remain square. This means that the image won’t get squished but will keep its intrinsic ratio. “The replaced content is sized to maintain its aspect ratio”. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. We’re going to use object-fit with the cover value. The missing part is to avoid the squishing of the image, and here comes the final trick. We’ve used the same variable to define the padding, so we don’t have to repeat the same value. Padding can be animated, which is cool, and we can see the importance of the CSS variable we used previously to define the size of the image. There are two things in particular to note in the above demo. Yes, the image will disappear! In the demo below, hover over the image and see the result.Īnimating the padding by Temani Afif ( CodePen. Now, imagine a situation where the padding is equal to the width. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. That’s the effect of box-sizing: border-box.īorder-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. We add 100px of padding on the left, which will leave only 100px of space for the image (the content-area). The image is squished, as we can see in the above demo. What will happen if we add some padding to an image where we’ve defined a fixed dimension and we’ve used box-sizing: border-box? Let’s try!
0 kommentar(er)
