如何在悬停或单击时放大图像？ [英] How to enlarge an image on hover or click?

问题描述

我正在尝试使用HTML和CSS制作一堆图像，如果我将鼠标悬停或单击它们中的任何一个，它将在同一页面中放大。这是我能够做到的：

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:

<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" />

推荐答案

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

Add all the images to a container, for example:

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

然后设置一些CSS，对所有< img>都起作用悬停在该容器中的code>标签：

Then set some CSS that does something to all <img> tags in that container when hovered:

.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.

这篇关于如何在悬停或单击时放大图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！