我希望当鼠标悬停时,图像可以平滑过渡到另一张图片。但是在使用以下代码后,图像的大小超出了页面,并且当鼠标悬停时,图像消失,没有其他图片可以被看到。
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;
}