上のCSSトランジションを使用して::擬似要素

Question

.posts .img-hover:before { 
 
    content: ''; 
 
    display: block; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 1.2s ease; 
 
    -moz-transition: opacity 1.2s ease; 
 
    -ms-transition: opacity 1.2s ease; 
 
    -o-transition: opacity 1.2s ease; 
 
    transition: opacity 1.2s ease-out; 
 
} 
 
.posts .img-hover:hover:before { 
 
    content: ''; 
 
    display: block; 
 
    background: url("img/Texture1.png"); 
 
    width: 320px; 
 
    /* image width */ 
 
    height: 220px; 
 
    /* image height */ 
 
    position: absolute; 
 
    top: 13px; 
 
    right: 2px; 
 
    opacity: 1; 
 
}

<div class="posts"> 
 
    <a href="#"> 
 
    <h2 class="postname"> 
 
     Travel Flashback #1 </h2> 
 
    </a> 
 
    <a class="img-hover" href="#"> 
 
    <img width="960" height="720" src="http://.." class="img-hover" alt="" /> 
 
    </a> 
 
</div>

前に、私はこのコードで一つの問題があります。見ての通り、私はbkg imgを持つpseudo element :: beforeの上での遷移が必要です。

私がマウスを動かすと、スムーズに動きますが、マウスを離れると、すぐにbkg imgが離れてしまいます。

何かお勧めしますか？

Answer 1

ホバーでは、おそらく擬似要素の実際のスタイルではなく、トランジションに関連するCSSだけが必要です。試してみる

.posts .img-hover:before { 
    content: ''; 
    display: block; 
    background: url("img/Texture1.png"); 
    width: 320px; /* image width */ 
    height: 220px; /* image height */ 
    position: absolute; 
    top: 13px; 
    right: 2px; 
    opacity: 0; 
    -webkit-transition: opacity 1.2s ease; 
    -moz-transition: opacity 1.2s ease; 
    -ms-transition: opacity 1.2s ease; 
    -o-transition: opacity 1.2s ease; 
    transition: opacity 1.2s ease-out; 
} 
.posts .img-hover:hover:before{ 
    opacity: 1; 
}