Question

我正在尝试使用Masonry jQuery包来制作图片库，并希望在您悬停的图片放大时产生效果。我已经完成了所有这些工作，但我的问题在于我无法让overflow:hidden工作。我的图像只是扩展到了我希望它们被切断的地方。

欢迎任何有用的提示。这是我的一些代码：

HTML：

<div class="row">
    <div class="col-md-1 test2"></div>

    <div class="col-md-10 test2">
        <div class="grid">
            <div class="grow pic_float_w1h2"><img class="grid-item grid-item--height2" src="http://lorempixel.com/400/400/people/9"></div>
            <div><img class="grid-item grid-item--height2 grid-item--width3" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--width3 grid-item--height2" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item" src="http://www.placehold.it/800x800"></div>
            <div class="grow pic_float_w1h2"><img class="grid-item grid-item--height2" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/VM43QLTKXE.jpg"></div>
            <div><img class="grid-item grid-item--height" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--height2 grid-item--width4" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--height3" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--height1 grid-item--width2" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--width2" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--width2" src="http://www.placehold.it/800x800"></div>
            <div><img class="grid-item grid-item--width4" src="http://www.placehold.it/800x800"></div>
        </div>
    </div>

CSS：

.container_gallery {
  margin-top: 5%;
}


/* ---- Gallery ---- */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  max-width: 1200px;
  max-height: 800px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
  border: 1px solid black;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 0px;
}

/*
.grid-item:hover {
  opacity: 0.3; filter: alpha(opacity=30);
}
*/

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

 /* ---- Gallery End ---- */

.grow .pic_float_w1h2 img {
  height: 200px;
  width: 160px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  height: 300px;
  width: 260px;
}

Answer 1

你正在寻找像这样的事情

  .grow img:hover {
     height: 300px;
     width: 260px;
     max-height: 300px;
     max-width: 260px; 
   }

溢出：隐藏不起作用

1 个答案: