如何在悬停或单击时放大图像？ [关闭]答案

【问题标题】：How to enlarge an image on hover or click? [closed]如何在悬停或单击时放大图像？ [关闭]
【发布时间】：2014-07-30 12:15:40
【问题描述】：

我正在尝试使用 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" />

【问题讨论】：

您需要一些 JavaScript 或 jQuery 来实现该行为。
您刚刚添加了图像。到目前为止，您为放大图像做了什么？
我已经编辑了我的问题。
但我没有看到任何 javascript 工作
StackOverflow 不是论坛。您应该至少展示您迄今为止尝试过的一些最小努力，并提供一些更详细的信息。您可能还想阅读how to ask a good question。

标签： html css

【解决方案1】：

仅使用悬停的一种可能性是使用transform:scale

JSfiddle Demo

CSS

img {
    transition:transform 0.25s ease;
}

img:hover {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}

【讨论】：

如果您不希望图像相互推送，这很好。不错的补充！

【解决方案2】：

将所有图像添加到容器中，例如：

<div class="imageContainer">
  <img src ="lion1.jpg" height="150" width="300" />
</div>

然后设置一些 CSS，在悬停时对容器中的所有 <img> 标记执行某些操作：

.imageContainer > img:hover {
  width: 500px;
  height: 200px;
}

我还没有尝试过，但我认为它可能会让您走上正确的道路来进行自己的实验。

【讨论】：

让我试试这个。我会尽快回复您。
快速 jsfiddle：jsfiddle.net/PRP95.

【解决方案3】：

查看fiddle

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：

#rightImage  
{  
  height:275px;  
  float:left;  
  position:relative;  
}  
#rightImage:hover img  
{  
  height: 300px;  
}

【讨论】：