Mit CSS Übergang auf :: vor Pseudo-Elemente

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>

Ich habe ein Problem mit diesem Code. Wie Sie sehen, möchte ich Übergang über Pseudo-Element :: vor, die bkg img hat.

Wenn ich schwebe, funktioniert der Übergang reibungslos, aber wenn ich die Maus verlasse, verschwindet bkg img sofort ohne Übergang.

Können Sie bitte etwas vorschlagen?

Answer 1

Auf dem Hover möchten Sie wahrscheinlich nur die CSS im Zusammenhang mit dem Übergang, nicht die tatsächlichen Stile für das Pseudo-Element. Versuchen Sie diese

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