如何通过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;
}

你不需要面具div.但为什么你使用jquery而不是css？使用.thumb_pic:hover而不是.hover_effect删除您的JavaScript.