У меня есть основной контейнер projects-container, а затем две детские контейнеры .project-block и like-work. Я добавил в код масштабирования свое изображение, чтобы оно изменяло ширину и высоту, чтобы сохранить правильные пропорции. Это вызывает две отдельные проблемы. Первая проблема заключается в том, что мой контейнер like-work больше не отображается на странице ..... см. Его в прямом эфире here. Он отображается в фрагменте, но не на странице.Регулировка контейнера для изображений не масштабируется
Во-вторых, я не могу понять, как получить project-block-banner, чтобы оставаться скрытым с регулировочной высотой с выполнением display:none, а затем display-block на hover. Раньше, когда я устанавливал высоту, он был бы скрыт под изображением из-за переполнения: скрытый`, а затем продвигался вверх при наведении. Теперь он просто встает на место вместо перехода.
Кто-нибудь знает, что я могу сделать для этих двух проблем? Я не уверен, что мой размер изображения является корнем для всего этого, и если да, есть ли лучший способ изменить размер изображения?
$('.project-block img').addClass(function() {
return (this.width/this.height > 1) ? 'wide' : 'tall';
});#projects-container {
height: auto;
width: 100%;
}
.project-block {
width: 33.33333333333333333333333333%;
height: 60%;
display: inline-block;
overflow: hidden;
}
.mobile {
display: none;
}
.project-block img {
width: 100%;
height: 100%;
-webkit-transition-duration: .7s;
transition-duration: .7s;
position: relative;
}
.project-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.project-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
.project-block img:hover {
transform: translate(0, -65px);
-webkit-transform: translate(0, -65px);
-webkit-transition-duration: .7s;
transition-duration: .7s;
}
.project-block-banner {
position: relative;
width: 100%;
height: 150px;
bottom: -.00000000000001;
background: #00a16d;
-webkit-transition-duration: .5s;
transition-duration: .5s;
display: none;
}
.project-block-banner-container {
padding: 40px 50px;
}
.project-block-banner-container a {
text-decoration: none;
} \t
.project-block img:hover + .project-block-banner {
transform: translate(0, -150px);
-webkit-transform: translate(0, -150px);
-webkit-transition-duration: .5s;
transition-duration: .5s;
display: block;
}
.project-block-banner-name, .project-block-banner-description {
color: #FFF;
text-decoration: none;
}
.project-block-banner-name {
font-size: 1.8em;
margin-bottom: 10px;
}
.project-block-banner-description {
font-size: 1.2em;
}
/*---Like Work----*/
#like-work {
background: #0085a1;
width: 66.66666666666666666666%;
display: inline-block;
height: 60%;
vertical-align: top;
position: relative;
}
#like-work-container {
padding: 0 100px;
}
#like-title, #like-title2, #like-links {
color: #FFF;
}
#like-title {
font-size: 2.5em;
margin-bottom: 35px;
}
#like-title2 {
font-size: 1.3em;
line-height: 1.3em;
margin-bottom: 65px;
}
#like-links a {
font-size: 1.2em;
}
#like-links a {
text-decoration: none;
}
#like-links-button {
padding: 15px 20px;
border: 2px solid #FFF;
-webkit-transition: ease-in-out .5s;
transition: ease-in-out .5s;
color: #FFF;
}
#like-links-button:hover {
border: 2px solid #FFF;
background: #FFF;
color: #0085a1;
-webkit-transition: ease-in-out .5s;
transition: ease-in-out .5s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="projects-container">
<div class="project-block">
<a href="projects/eslich-wrecking"><img src="http://optimumwebdesigns.com/images/work/eslich.jpg" alt="" class="desktop"><div class="project-block-banner">
<div class="project-block-banner-container">
<div class="project-block-banner-name">fgds gfdsgfds</div>
<div class="project-block-banner-description">gfdgs gfdsg fgsgsg</div>
</div>
</div>
</a>
</div>
<div id="like-work">
<div id="like-work-container" class="total-center">
<div id="like-title">gfdg dfsg sdfg sdg</div>
<div id="like-title2">gfd gfds gfds gfsd gfds fd</div>
<div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>
</div>
</div>
</div>
Я проверяю живую версию, которую вам нужно, чтобы обернуть блок-блок-блок в figcaption. – Ricky
На самом деле вам больше не нужно использовать проект-блок-баннер css в моей демонстрации. – Ricky