Image Animation CSS

Hi everyone my name is Sandeep and I am a software developer who loves learning new technology and building stuff.

So what we are building today. Today we are building a simple image animation using CSS.

Let's discuss the first animation in that we are hovering and an image is changing and in the second one when we are hovering we are getting a text on top of the image

let see the HTML of the first animation and then I will explain

In this I have one parent div for both the images and two images which are inside the image-container first image is the original one and the second one is the image that will be an overlay on hover. Let's look at the CSS.

so for the image container, we have given the position to be relative and for the img inside the image container we have chosen height and width to be 100% so that it can occupy the full div. “.image-after” is the class for the second image first we have put the second image on top of the first image by making the position to be absolute and top:0 and left:0. Then look at the code in the hover where we have made the opacity of the second image to be 1. with this image will change on hover as soon as we hover. So we add the transition on the image with 600ms and ease so that it will take some time to transition to look good.

Let's see the HTML of the second animation

this is the image in the container with two classes image-container and fade

let's see the CSS of this div

so for the transition to happen we will use content from the CSS. In the .fade:: after, will create a div kind of a thing and put that on top of the image then we change that opacity on hover with the transition of 300ms .flex is used to align the written text on that thing

and yes finally we have made two beautiful animations. If you have any question leave it down below.