We have seen in many image galleries and in many websites that when we take our cursor into the image it gets faded out and other image come in its place , this effect is called cross fading image effect. we can achieve it by simply using css without using any jQuery code.
First we need two images for this cross fading image effect. We have to ensure they are the same size.
Then we have to make a div and put these images into it.
Below is the html code for doing that:-
<html>
<head>
<title>Cross fading image effect</title>
</head>
<body>
<div class="wrapper">
<img class="image1" style="position: absolute;" src="background1.jpg" alt="">
<img class="image2" src="background2.jpg" alt="">
</div>
</body>
</html>
Then we have to use below css code :-
.wrapper img { transition: 1s ease-in-out; }
img.image1, div.changer:hover img.image2 { opacity: 1.0; }
.wrapper:hover img.image1, img.image2 { opacity: 0; }
In above css code first we are placing images over each other and then we are changing their opacity on hover.
File attach with this blog contains working demo of the cross fading image effect.
0 Comment(s)