javascript - 如何通过 CSS 屏蔽给定 div 中的图像？

Question

基本上，我正在做一个看起来像这样的元素:

当鼠标移到图片上时，div内的图片会通过动画放大，但只显示div内的图片部分，剪掉外面的部分。有没有办法根据div的宽度和高度来裁剪图像？在我的例子中，只有当鼠标悬停在它上面时它才会放大，但不会被剪裁。

$('.thumbnail').on('mouseover',
  function() {
    $(this).find('.thumb_pic').addClass('hover_effect');
  }
);

$('.thumbnail').on('mouseout',
  function() {
    $(this).find('.thumb_pic').removeClass('hover_effect');
  }
);

.thumbnail {
  display: inline-block;
  position: relative;
}

.thumb_pic {
  width: 500px;
  padding: 5px;
  transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.hover_effect {
  transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
}

.mask {
  opacity: 0;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 500px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.75);
  transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}

.mask:hover {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
  <img class="thumb_pic" src="/thumb_img/thumb.png" />
  <div class="mask"></div>
</div>

Answer 1

.thumbnail{
    overflow:hidden;
    width: 500px;
    height: 500px;
}

您不需要 mask div。但为什么你使用 jquery 而不是 css？使用 .thumb_pic:hover 而不是 .hover_effect 并删除您的 javascript。