html - 如何在悬停或单击时放大图像？

<分区>

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

最佳答案

仅使用悬停的一种可能性是使用 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);
}

关于html - 如何在悬停或单击时放大图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25036597/

上一篇：php - 如何从 imap_body 结果中仅提取 HTML

下一篇：html - 如何使边框底部更靠近文本？

jquery - Bootstrap 下拉菜单的自定义样式

iphone - 如何解决在 iPhone 版 Refinery CMS 中不起作用的媒体查询？

html - 如何在图像上叠加 Logo ？使用 CSS

javascript - 当用户滚动时停止隐藏在导航栏下的内容

javascript - 是否可以查询背景图像的所有具有行内样式属性的元素？

C# 获取 css 属性

javascript - 如何使用onclick Javascript制作div幻灯片动画

javascript - 如何判断 Google Analytics 是否已加载

javascript - 如何在同一个 div 中定位 next()