Change image on hover | Pure CSS animation effect

Change image on hover | Pure CSS animation effect

Follow this Channel:
----------------------

Watch More Videos :
--------------------

👉 Image Credit: Pexels

#neduzone

[dharmendrasingh-ozuz]

1.html-code

<div class="wrapper">
<figure>
<div class="img-area">
<img src="images/div.jpg class="img-back">
<img src="images/div.jpg class="img-front">
</div>
</figure>
</div>


2. css-code

.wrapper {
margin-top: 30em;

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.img-area {
position: relative;
height: 300px;
width: 400px;
margin: 10% auto 0;
}

.img-area img {
position: absolute;
left: 0;
height: 300px;
width: 400px;
transition: opacity 1s ease-in-out;
}

.img-area img.img-front:hover {
opacity: 0;
cursor: pointer;
}

[kuanjarlo]

0:28 - End of HTML
0:36 - Start of CSS

[Untergrund_Koenig]

how it works if i want to add a href link to the picure whit the hover?

[soumyaranjan]

Hi how to do it with more than 2 image