divへの滑らかなCSSトランジション

Question

次のコードがありますが、ホバー上で円滑なトランジションを行うことはできません。

<div class="image_container"> 
    <figure><img alt="" src="http://dummyimage.com/279x279/000000/fff"></figure> 
    <div class="bio_overlay"></div> 
</div> 

私は実際のクラスにトランジション効果を適用しましたが、何らかの理由でそれが効果を検出していません。

デモ：https://jsfiddle.net/squidraj/r4LLf4w0/

すべてのヘルプは高く評価されています。

Answer 1

visibilityと移行opacityを使用しています。 visibility,などのプロパティは移行できません。

.image_container { 
 
    position: relative; 
 
    width: 279px; 
 
    height: 279px; 
 
} 
 
.image_container img { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.bio_overlay { 
 
    background: #ffc27f; 
 
    bottom: 0; 
 
    height: 100%; 
 
    left: 2.5rem; 
 
    opacity: 0.4; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    transition: opacity 0.5s ease-in-out 0s; 
 
    width: 100%; 
 
    opacity: 0; 
 
} 
 
.image_container:hover .bio_overlay { 
 
    opacity: 0.4; 
 
}

<div class="image_container"> 
 
    <figure> 
 
    <img alt="" src="http://dummyimage.com/279x279/000000/fff" /> 
 
    </figure> 
 
    <div class="bio_overlay"></div> 
 
</div>

Answer 2

だけopacity:タグとvisibility:タグを置き換えます。 https://jsfiddle.net/r4LLf4w0/2/

Answer 3

はvisibilityでは動作しません。ここにjsfiddle

transitionを参照してください。

bio_overlay { 
    background: #ffc27f; 
    bottom: 0; 
    height: 100%; 
    left: 2.5rem; 

    position: absolute; 
    right: 0; 
    top: 0; 
    transition: opacity 0.5s ease-in-out 0s; 
    opacity:0; 
    width: 100%; 
} 

.image_container:hover .bio_overlay { 
    opacity:0.4; 
} 

Answer 4

これを試してみてください：

.image_container:hover .bio_overlay { 
visibility: visible; 
opacity: 0.5; 
} 

それだけ opacity

コードの代わりに、視認性の使用の...ので、 'calulable'（0,1）のような値として動作します