Jquery 溢出:隐藏不';行不通
我正在尝试使用jQuery软件包制作一个图像库,并希望在您悬停的图片放大时产生效果。我已经把所有这些都做好了,但我的问题在于我无法让Jquery 溢出:隐藏不';行不通,jquery,html,css,jquery-masonry,Jquery,Html,Css,Jquery Masonry,我正在尝试使用jQuery软件包制作一个图像库,并希望在您悬停的图片放大时产生效果。我已经把所有这些都做好了,但我的问题在于我无法让溢出:隐藏工作。我的图像只是扩展到我希望它们被剪掉的地方 欢迎提供任何有用的提示。以下是我的一些代码: HTML: <div class="row"> <div class="col-md-1 test2"></div> <div class="col-md-10 test2"> &l
溢出:隐藏工作。我的图像只是扩展到我希望它们被剪掉的地方
欢迎提供任何有用的提示。以下是我的一些代码:
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>
.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;
}
你在找这样的东西
.grow img:hover {
height: 300px;
width: 260px;
max-height: 300px;
max-width: 260px;
}
带有溢出的CSS在哪里?我试过了,但还是不起作用。这可能会干扰站点正在使用的一些jQuery插件/库吗?请尝试设置最大宽度和高度。让我更新答案