xプロパティにトランジションを含む隠しdivを表示

Question

私はイメージを持っていて、イメージの下にバナーを持っています。画像の上にマウスを置くと、y軸上に100ピクセル上がっています。私が理解できないことは、イメージの上を乗り越えながら、バナーを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

また、私は、バナー自体にtransition-durationを追加、+selector in CSSを使用することができます。

.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>