Question

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

Answer 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);
}

Answer 2

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

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

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

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

我没有试过这个，但我认为它可能会让你走上正确的道路来试验自己。

Answer 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;  
}

如何在悬停或点击时放大图像？

3 个答案: