4
У меня есть небольшая проблема, которая действительно меня беспокоит. Всякий раз, когда мои изображения зависнут, появляется черное оверлей с непрозрачностью. Тем не менее, изображение увеличивает изображение. Обратите внимание: я не имею в виду свойство 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>
Целиком не имеет отношения к вашей проблеме, но вы можете сократить этот первый фрагмент JQuery (в котором вы добавляете класс) к: ('дом-IMG-блок IMG') '$ .addClass (function() {return (this.width/this.height> 1)? 'wide': 'tall';}); '(Но это просто случайный FYI и, как уже отмечалось, не имеет отношения к вашей опубликованной проблеме.) :) –
Спасибо за подсказку! – Becky