html - CSS放大图像悬停

标签 html css hover zooming

使用以下代码,我可以在悬停时放大图像:

.image {
  width: 250px;
  height: 250px;
  background-image: url(http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid red;
  cursor: pointer;
}

.image:hover {
  background-size: 120% 120%;
}
<div class="image"></div>

我如何使用 <img> 来做到这一点?标签而不是 <div>有背景图片吗?

最佳答案

您可以将图像包裹在一个 div 中:

<div class="item">
  <img src="http://via.placeholder.com/200x200">
</div>

并应用这个 CSS:

.item { //This is the container div
  border: 1px solid red;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.item img { //This is the img
  transition: all 0.3s;
}
.item:hover img { //This is the img during hover
  transform: scale(1.5); //Increase or decrease this number to change the zoom
}

.item {
  border: 1px solid red;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.item img {  
  transition: all 0.3s;
}
.item:hover img {
  transform: scale(1.5);
}
<div class="item">
  <img src="http://via.placeholder.com/200x200">
</div>

关于html - CSS放大图像悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46748022/

相关文章:

Javascript 如何在悬停到图像时显示消息

jquery - 悬停在 IE9 中无法与 iFrame 配合使用

用于生成在悬停时改变颜色的多色文本的 jQuery 插件

javascript - 使用jquery查找data*属性而不指定标签

javascript - 在 IE 上控制嵌入标签的音量

javascript - 在选择元素中选择新选项时停止递增

jquery - 如何像8球一样旋转一个div

css - 使用 angular-1.3 获取 angular-bootstrap 模态

jquery - 文本溢出省略和展开不起作用

html - 搜索框在调整大小时使导航栏的高度加倍