Html 如何在悬停或单击时放大图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25036597/
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
How to enlarge an image on hover or click?
提问by Emmanuel O.
I'm trying to make a stack of images using HTML and CSS, that if I hover or click on any of them, it will be enlarged in the same page. This is what I've been able to do:
我正在尝试使用 HTML 和 CSS 制作一堆图像，如果我将鼠标悬停或单击其中任何一个，它将在同一页面中放大。这就是我能够做的：
<img src ="mark1.jpg" height="150" width="300" />
<img src ="mark2.jpg" height="150" width="300" />
<img src ="mark3.jpg" height="150" width="300" />
<img src ="mark4.jpg" height="150" width="300" />
<img src ="watson1.jpg" height="150" width="300" />
<img src ="watson2.jpg" height="150" width="300" />
<img src ="watson3.jpg" height="150" width="300" />
<img src ="watson4.jpg" height="150" width="300" />
<img src ="watson5.jpg" height="150" width="300" />
<img src ="morgan1.jpg" height="150" width="300" />
<img src ="nyong1.jpg" height="150" width="300" />
<img src ="lion1.jpg" height="150" width="300" />
回答by Paulie_D
One possibililty using hover only is to use transform:scale
仅使用悬停的一种可能性是使用 transform:scale
CSS
CSS
img {
transition:transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5); /* or some other value */
transform:scale(1.5);
}
回答by confuse
Add all the images to a container, for example:
将所有图像添加到容器中，例如：
<div class="imageContainer">
<img src ="lion1.jpg" height="150" width="300" />
</div>
Then set some CSS that does something to all <img>tags in that container when hovered:
然后设置一些 CSS，<img>在悬停时对该容器中的所有标签执行某些操作：
.imageContainer > img:hover {
width: 500px;
height: 200px;
}
I have not tried this but I think it might get you on the right track to experiment yourself.
我还没有尝试过这个，但我认为它可能会让你走上自己试验的正确轨道。
回答by Shubham Bhave
Check this fiddle
检查这个小提琴
HTML:
HTML：
<body>
<div id="rightImage">
<a href="www. abc.com" target="_blank"> <img src="https://www.gravatar.com/avatar/703327d6394d273e741186dbc0109f4f?s=128&d=identicon&r=PG&f=1" alt="image"/></a>
</div>
</body>
CSS:
CSS：
#rightImage
{
height:275px;
float:left;
position:relative;
}
#rightImage:hover img
{
height: 300px;
}
