Using CSS transition on ::before pseudo element

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

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