Using CSS transition on ::before pseudo element - 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>
I have one problem with this code. As you see I want transition over pseudo element ::before, which has bkg img.
When I hover on, transition works smoothly, but when I leave mouse, bkg img goes away immediately without transition.
Can you please suggest something?

Answer 1

On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this
.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;
}

Answer 2

For others browsing through this forum, I came to this thread with exact same problem, I tried to switch transition focus from
opacity 0.35s ease-in-out
to:
all 0.35s ease-in-out
and issue was resolved.
My browser is Chromium version 80.0.3987.162, Debian Linux 10.4

Answer 3

My issue was actually that the transition did not work at all. The element appears and disappears instantly. For those with a similar problem and came here, I believe CSS ignores the on-hover transition for an empty element even if the content will be added on hover and the reason it doesn't transition when you hover off is because the content is removed immediately.
Instead of
elem:before{
opacity:0;
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
content:'something';
}
move content to elem:before
elem:before{
opacity:0;
content:'something';
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
}
If you want the content only on hover but you want to transition another property (like width) and opacity can't be used, content: ''; should work on hover but remember to keep the property even when you hover off.
To answer OP's question and why the solution by ynter works it's because the background disappears once they hover off. Keep the background in the :before element.