在我的网页上,我想放一张图片,当鼠标指针悬停在该图片上时,会出现放大的版本。
最佳答案
根据评论中对需求的进一步解释更新了 CSS 解决方案
<div class="effectback">
<img class="effectfront" src="https://farm8.staticflickr.com/7042/6873010155_d4160a32a2.jpg" />
</div>
attribution<br/>
https://secure.flickr.com/photos/34022876@N06/6873010155/sizes/m/in/photostream/
.effectback {
display: block;
background: url('https://farm8.staticflickr.com/7042/6873010155_d4160a32a2_s.jpg') no-repeat;
margin: 0 auto;
}
.effectfront {
opacity: 0;
border: none;
margin: 0 auto;
}
.effectfront:hover {
opacity: 1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
基于原始问题的原始css解决方案
CSS 解决方案
.effectscale {
border: none;
margin: 0 auto;
}
.effectscale:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
关于html - 当鼠标悬停在图像上时显示放大的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18456169/