ホバリングの高さの遷移が動作しない

Question

私はこの問題にぶつかったトランジション関連のボックスに取り組んでいました。グレースケールの画像がいくつかあります。あなたがそれらの上を動くとき、彼らは彼らの正常な状態に来る。実際の問題は、画像上にマウスを置くと、表示されている境界線と特定の高さのクラスがあることです。私はクラスに特定の高さを与えました。イメージにマウスを置くと、クラスの高さが増加し、ある特定のポイントで停止するはずです。しかし、高さの遷移は機能しません。

.section-inner { 
 
    width: 440px; 
 
    margin: 0 auto; 
 
} 
 
.grid-img:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
} 
 
.grid-img { 
 
    background-color: #ffffff; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    transition: all 0.8s ease-in-out; 
 
} 
 
.profile img { 
 
    width: 150px; 
 
    height: auto; 
 
} 
 
.img-caption { 
 
    top: 10px; 
 
    left: 5%; 
 
    z-index: -1; 
 
    height: 20%; 
 
    position: absolute; 
 
    display: none; 
 
    width: 90%; 
 
    height: 20%; 
 
    border: 4px solid gray; 
 
} 
 
.grid-img:hover .img-caption { 
 
    z-index: 99; 
 
    border: 4px solid orange; 
 
    display: block; 
 
    height: 120%; 
 
} 
 
.dummy { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.dummy h4 { 
 
    font-size: 16px; 
 
    padding-bottom: 10px; 
 
}

<div class="section-inner"> 
 
<div class="atg-col-2 grid-img"> 
 
    <div class="profile"> 
 
     <img src="https://preview.ibb.co/dJHACQ/Road.jpg"> 
 
    </div><!-- .profile--> 
 
    <div class="img-caption"> 
 
     <div class="dummy"> 
 
     <h4>SARA CAVIL</h4> 
 
     </div> 
 
    </div><!-- img-caption--> 
 
    </div><!-- grid-img--> 
 

 
    <div class="atg-col-2 grid-img"> 
 
    <div class="profile"> 
 
     <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg"> 
 
    </div><!-- .profile--> 
 
    <div class="img-caption"> 
 
     <div class="dummy"> 
 
     <h4>SARA CAVIL</h4> 
 
     </div> 
 
    </div><!-- img-caption--> 
 
    </div><!-- grid-img--> 
 
</div>

ヘルプの任意の種類が理解されます。 ありがとうございます。

Answer 1

このようなものが欲しいですか？

ディスプレイに問題がありました。これは、移行の問題を引き起こしていました。変更を示すために余分なトランジションを追加しました。また、widthを言及する必要はないので、leftとrightの位置を定義することもできます。また、display:noneプロパティを使用する代わりに、visibility:hiddenとvisibility:visibleに行くのは、下記のCSSクラスで説明されています。

CSS：

.img-caption { 
    top: 0px; 
    left: 0px; 
    right:0px; 
    visibility:hidden; 
    z-index: -1; 
    height: 20%; 
    position: absolute; 
    transition:all 1s ease; 
    height: 20%; 
    border: 4px solid gray; 
} 
.grid-img:hover .img-caption { 
    z-index: 99; 
    visibility:visible; 
    border: 4px solid orange; 
    display: block; 
    height: 120%; 
} 

スニペット：

.section-inner { 
 
    width: 440px; 
 
    margin: 0 auto; 
 
} 
 
.grid-img:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
} 
 
.grid-img { 
 
    background-color: #ffffff; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    transition: all 0.8s ease-in-out; 
 
} 
 
.profile img { 
 
    width: 150px; 
 
    height: auto; 
 
} 
 
.img-caption { 
 
    top: 0px; 
 
    left: 0px; 
 
    right:0px; 
 
    visibility:hidden; 
 
    z-index: -1; 
 
    height: 20%; 
 
    position: absolute; 
 
    transition:all 1s ease; 
 
    height: 20%; 
 
    border: 4px solid gray; 
 
} 
 
.grid-img:hover .img-caption { 
 
    z-index: 99; 
 
    visibility:visible; 
 
    border: 4px solid orange; 
 
    display: block; 
 
    height: 120%; 
 
} 
 
.dummy { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.dummy h4 { 
 
    font-size: 16px; 
 
    padding-bottom: 10px; 
 
}

<div class="section-inner"> 
 
<div class="atg-col-2 grid-img"> 
 
    <div class="profile"> 
 
     <img src="https://preview.ibb.co/dJHACQ/Road.jpg"> 
 
    </div><!-- .profile--> 
 
    <div class="img-caption"> 
 
     <div class="dummy"> 
 
     <h4>SARA CAVIL</h4> 
 
     </div> 
 
    </div><!-- img-caption--> 
 
    </div><!-- grid-img--> 
 

 
    <div class="atg-col-2 grid-img"> 
 
    <div class="profile"> 
 
     <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg"> 
 
    </div><!-- .profile--> 
 
    <div class="img-caption"> 
 
     <div class="dummy"> 
 
     <h4>SARA CAVIL</h4> 
 
     </div> 
 
    </div><!-- img-caption--> 
 
    </div><!-- grid-img--> 
 
</div>

Answer 2

を使用でき

.img-caption { 
    top: 10px; 
    left: 5%; 
    z-index: -1; 
    height: 0%; 
    position: absolute; 
    width: 90%; 
    border: 4px solid gray; 
    transition: all 0.8s ease-in-out; 
    }