[英]Show enlarged picture when mouse hover over an image
在我的网页上,我想放置一个图像,当鼠标指针悬停在该图像上时,会出现一个放大的版本。
Updated CSS solution based on further explanation of the requirement in the comments 基于对注释中的需求的进一步说明更新了CSS解决方案
http://jsfiddle.net/5sRTX/7/ http://jsfiddle.net/5sRTX/7/
<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;
}
Original css solution based on the original question 基于原始问题的原始css解决方案
CSS solution CSS解决方案
http://jsfiddle.net/ERh62/1/ http://jsfiddle.net/ERh62/1/
.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;
}
<img src="..." onmouseover="this.width='someWidth'; this.height='someHeight'" onmouseout="this.width='originalWidth'; this.height='originalHeight'">
Just try this : 试试这个:
<html>
<head>
<style>
.container{
overflow:hidden;
width:300px;/*change this to whatever you want*/
height:150px;/*change this to whatever you want*/
/*Of course, to get the desired effect, the size of the image "<img>" below must be larger than the size mentioned above*/
}
.container:hover{
overflow:visible
}
</style>
</head>
<body>
<div class='container'><img src='myImage.png'/></div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.