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。

Answer 2

注意：这不是答案，只是建议让您的代码更有效率

而不是使用JQuery mouseover和mouseout使用css

而不是

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

<强>尝试

.thumbnail:hover .thumb_pic {
    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);
}

Answer 3

我认为您正在寻找的财产是＆＃34;溢出：隐藏＆＃34;

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

3 个答案: