鼠标悬停时放大图片并保持相同大小。

Question

我想在我的网站上添加悬停缩放功能，但是我看到其他示例，我的代码似乎相同，但图像的尺寸却不一样。有什么想法是什么问题呢？

.imgBox {
  display: inline-block;
  overflow: hidden !important;
  transition: .3s ease-in-out
}

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

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

JSFiddle

- Dee

---

这是你想要做的吗？https://jsfiddle.net/2gh0juvx/1/ - jeffjenx

是的，谢谢。它有效。 - Dee

Answer 1

看起来你正在尝试缩放图像，这是可以的，但为了限制实际显示的内容，需要在容器内缩放图像。

然后当图像被缩放时，容器将隐藏任何通常会“溢出”的内容，如果你不隐藏溢出内容的话。

所以，像这样：

.imgBox { /* now a container for the image */
    display: inline-block; /* shrink wrap to image */
    overflow: hidden; /* hide the excess */
  }
  .imgBox img {
    display: block; /* no whitespace */
    transition: .3s ease-in-out;
  }
  .imgBox:hover img {
    transform: scale(1.3);
  }

<div class="large-3 medium-6 small-12 columns">
  <h2>Heading 1</h2>
  <div class="imgBox">
    <img src="http://lorempixel.com/image_output/food-q-c-300-200-9.jpg" />
  </div>
  <p>Paragraph here</p>
</div>

- Paulie_D

Answer 2

保利是正确的，但你还可以使用background-image而不是img标签的另一种方法。

  .imageWrapper{
    background-image:url("http://techmadeplain.com/img/2014/300x200.png");
    width:300px;
    height:200px;
    background-size:100%;  
    background-position: center center;
    transition: .3s ease-in-out;
  }

  .imageWrapper:hover{
    background-size:130%;
  }

<div class="large-3 medium-6 small-12 columns">
  <h2>Heading 1</h2>
  <div class='imageWrapper'> 
  </div>  
  <p>Paragraph here</p>
</div>

- Peter Wilson

---

我将永远欠你一份人情。 - Valdrinium