Html 当鼠标悬停在图像上时显示放大的图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18456169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show enlarged picture when mouse hover over an image
提问by alancc
On my webpage, I want to put an image such that when the mouse pointer hovers over that image, an enlarged version will appear.
在我的网页上，我想放置一个图像，当鼠标指针悬停在该图像上时，会出现放大的版本。
回答by Anton
Updated CSS solution based on further explanation of the requirement in the comments
根据评论中对要求的进一步解释更新了 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;
}
Original css solution based on the original question
基于原始问题的原始css解决方案
CSS solution
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;
}
回答by Cruncher
<img src="..." onmouseover="this.width='someWidth'; this.height='someHeight'" onmouseout="this.width='originalWidth'; this.height='originalHeight'">
回答by yacine
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>
