Отображение скрытого div с переходом на свойство x

Question

У меня есть изображение, а затем изображение под изображением. Когда вы наводите курсор на изображение, я увеличиваю его на 100 пикселей по оси y. Что я не могу понять, так это то, как принести баннер вверх по оси Y вместе с ним, нависая над изображением. Я не уверен, что это то, как я пытаюсь выполнить зависание или что.

Кто-нибудь видит, что я делаю неправильно?

.project-block { 
 
    width: 33.33333333333333333333333333%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
.project-block img { 
 
    width: 100%; 
 
    height: 300px; 
 
    -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
    position: relative; 
 
} 
 
.project-block img:hover { 
 
    transform: translate(0, -100px); 
 
    -webkit-transform: translate(0, -100px); 
 
    -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
} 
 
.project-block-banner { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100px; 
 
    bottom: -.01; 
 
    background: #00a16d; 
 
} 
 
.project-block img:hover.project-block-banner { 
 
    transform: translate(0, -100px); 
 
    -webkit-transform: translate(0, -100px); 
 
    -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
}

<div class="project-block"> 
 
    <a href="projects/eslich-wrecking"> 
 
    <img src="images/work/eslich.jpg" alt=""> 
 
    <div class="project-block-banner"> 
 
     <div class="project-block-banner-container"> 
 
     <div class="project-block-banner-name">company</div> 
 
     <div class="project-block-banner-description">htrhr ghrth ht</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 1

Вы можете использовать +selector in CSS, я также добавил transition-duration для самого баннера.

.project-block { 
 
\t width: 33.33333333333333333333333333%; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t overflow: hidden; 
 
} 
 
.project-block img { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
\t position: relative; 
 
} 
 
.project-block img:hover { 
 
\t transform: translate(0, -100px); 
 
\t -webkit-transform: translate(0, -100px); 
 
\t -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
} 
 
.project-block-banner { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t bottom: -.01; 
 
\t background: #00a16d; 
 
    -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
} 
 
.project-block img:hover + .project-block-banner { 
 
\t transform: translate(0, -100px); 
 
\t -webkit-transform: translate(0, -100px); 
 
\t -webkit-transition-duration: .5s; 
 
    transition-duration: .5s; 
 
}

<div class="project-block"> 
 
    <a href="projects/eslich-wrecking"> 
 
    <img src="images/work/eslich.jpg" alt=""> 
 
    <div class="project-block-banner"> 
 
     <div class="project-block-banner-container"> 
 
     <div class="project-block-banner-name">ESLICH WRECKING</div> 
 
     <div class="project-block-banner-description">htrhr ghrth ht</div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>