我有一个小问题确实困扰着我。每当我的图像悬停在上方时,黑色覆盖层就会出现不透明的情况。但是,它会使图像变高。请注意,我指的不是transform,scale属性。实际图像的高度在图像底部增加。
是什么原因造成的?
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 450px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
float: left;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-block:hover:after {
opacity: 1;
}
.home-img-block img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.home-img-block:hover img {
-webkit-transform: scale(1.25);
/* Safari and Chrome */
-moz-transform: scale(1.25);
/* Firefox */
-ms-transform: scale(1.25);
/* IE 9 */
-o-transform: scale(1.25);
/* Opera */
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
</div>
图像太疯狂了display
。他们既不的block
,inline-block
或inline
。display: block
由于其baseline
属性,请尝试给予图像。
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
img {
display: block;
}
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 450px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
float: left;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-block:hover:after {
opacity: 1;
}
.home-img-block img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.home-img-block:hover img {
-webkit-transform: scale(1.25);
/* Safari and Chrome */
-moz-transform: scale(1.25);
/* Firefox */
-ms-transform: scale(1.25);
/* IE 9 */
-o-transform: scale(1.25);
/* Opera */
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句