Menu
I want transition of image to another image when hover. But after using the following code the size of the image is more than the page and when hover the image disappears and no other image can be seen.
HTML
<html>
<head>
<title></title>
</head>
<body>
<div id="cssfade">
<img src="image1.jpg" height:200px;width:300px;/>
</div>
</body>
</html>
CSS
#cssfade {
background-image: url('image2.jpg');
height:200px;
width: 300px;
}
#cssfade img {
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#cssfade img:hover {
opacity:0;
}
681
I'm assuming the image in the div is content so I have left it there and merely moved the hover to take effect when the wrapping div is hovered.
#cssfade {
width: 300px;
height: 200px;
background-image: url(http://lorempixel.com/300/200/sports/2/);
}
#cssfade img {
width: 300px;
height: 200px;
display: block;
transition: opacity 1s ease;
}
#cssfade:hover img {
opacity: 0;
}<div id="cssfade">
<img src="http://lorempixel.com/300/200/sports/1/" alt="">
</div>EDIT - Just to clarify the difference to Tushar's answer, the transitions should be on #cssfade rather than #cssfade:hover to ensure the transition applies when hovering and un-hovering.
HTML:
<html>
<head>
<title>...</title>
</head>
<body>
<div id="cssfade"></div>
</body>
</html>
CSS:
#cssfade {
height:200px;
width: 300px;
background-image: url('image1.jpg') no-repeat;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#cssfade:hover {
background-image: url('image2.jpg') no-repeat;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With