小编Dee*_*Dee的帖子

放大悬停图像并保持相同的大小

我正在尝试为我的网站设置悬停缩放功能,但是,我已经看到了其他示例,我的代码似乎是相同的,但图像的尺寸并不相同.任何想法可能是什么问题?

.imgBox {
  display: inline-block;
  overflow: hidden !important;
  transition: .3s ease-in-out
}
Run Code Online (Sandbox Code Playgroud)

  .imgBox {
    display: inline-block;
    overflow: hidden !important;
    transition: .3s ease-in-out
  }
  .imgBox:hover {
    opacity: 0.6;
    filter: alpha(opacity=30);
    transform: scale(1.3);
  }
Run Code Online (Sandbox Code Playgroud)
<div class="large-3 medium-6 small-12 columns">
  <h2>Heading 1</h2>
  <img class="imgBox" src="http://techmadeplain.com/img/2014/300x200.png" />
  <p>Paragraph here</p>
</div>
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

html css hover image-zoom

4
推荐指数
1
解决办法
6396
查看次数

标签 统计

css ×1

hover ×1

html ×1

image-zoom ×1