Issue with opacity fade in CSS - css

Question

I have an issue in CSS while trying to fade in some elements in CSS.
I would like to show with a fade in effect some elements in my image right after the rotate transition but it doesn't work.
I did a jsfiddle and you can activate the effect with an hover on the image :
https://jsfiddle.net/egfjp36h/
Here's my HTML code :
<div class="flip-box">
<div class="fut-player-card card-display">
<div class="fut-front">
<div class="player-card-top player-card-top-color">
<div class="player-master-info">
<div class="player-rating">
<span>97</span>
</div>
<div class="player-position">
<span>RW</span>
</div>
<div class="player-nation">
<img src="https://selimdoyranli.com/cdn/fut_card/img/argentina.svg" alt="Argentina" draggable="false">
</div>
<div class="player-club">
<img src="https://selimdoyranli.com/cdn/fut_card/img/barcelona.svg" alt="Barcelona" draggable="false">
</div>
</div>
<div class="player-picture">
<img src="https://selimdoyranli.com/cdn/fut_card/img/messi.png" alt="Messi" draggable="false">
</div>
</div>
<div class="player-card-bottom">
<div class="player-info player-info-color">
<div class="player-name player-name-border"><span>MESSI</span></div>
<div class="player-features">
<div class="player-features-col player-features-col-border">
<span>
<div class="player-feature-value">97</div>
<div class="player-feature-title">RDV</div>
</span>
<span>
<div class="player-feature-value">95</div>
<div class="player-feature-title">CTR</div>
</span>
<span>
<div class="player-feature-value">94</div>
<div class="player-feature-title">TRANSF</div>
</span>
</div>
<div class="player-features-col player-features-col-border">
<span>
<div class="player-feature-value">99K€</div>
<div class="player-feature-title">CA</div>
</span>
<span>
<div class="player-feature-value">35</div>
<div class="player-feature-title">DEF</div>
</span>
<span>
<div class="player-feature-value">68</div>
<div class="player-feature-title">PHY</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my CSS :
.fut-player-card{
position: relative;
width:300px;
height:485px;
background-position: center center;
background-size:100% 100%;
background-repeat: no-repeat;
padding:5.9rem 0;
z-index: 2;
transition: 200ms ease-in;
margin-left: auto;
margin-right: auto;
}
.card-display{
background-image: url(https://selimdoyranli.com/cdn/fut_card/img/card_bg.png);
}
.card-display2{
background-image: url("img/fut/fut1.png");
}
.card-display3{
background-image: url("img/fut/fut2.png");
}
.card-display4{
background-image: url("img/fut/fut3.png");
}
.player-card-top{
position: relative;
display: flex;
padding: 0 3.5rem;
}
.player-master-info{
position: absolute;
line-height: 3.2rem;
font-weight: 300;
padding: 3rem 0;
text-transform: uppercase;
}
.player-rating{
font-size:3rem;
}
.player-position{
font-size: 2.2rem;
}
.player-nation{
display: block;
width:3rem;
height:25px;
margin: 0.5rem 0;
}
.player-nation img{
width:100%;
height: 100%;
object-fit: contain;
}
.player-club{
display: block;
width:3.1rem;
height:40px;
}
.player-club img{
width:100%;
height: 100%;
object-fit: contain;
}
.player-picture{
width:200px;
height:200px;
margin: 0 auto;
overflow: hidden;
}
.player-picture img{
width:100%;
height:100%;
object-fit: contain;
position: relative;
right: -1.5rem;
bottom: 0;
}
.player-extra{
position: absolute;
right:0;
bottom: -0.5rem;
overflow: hidden;
font-size:1rem;
font-weight: 700;
text-transform: uppercase;
width:100%;
height:2rem;
padding:0 1.5rem;
text-align: right;
background:none;
}
.player-extra span{
margin-left: 0.6rem;
text-shadow:2px 2px #333;
}
.player-card-bottom{
position: relative;
}
.player-info{
display: block;
padding:1rem 0;
width:90%;
margin:0 auto;
height: auto;
position: relative;
z-index: 2;
}
.player-info-color, .player-card-top-color{
color:#e9cc74;
}
.player-info-color2, .player-card-top-color2{
color:#130d40;
}
.player-name{
width:100%;
display: block;
text-align: center;
font-size:2.2rem;
text-transform: uppercase;
padding-bottom: 0.3rem;
overflow: hidden;
}
.player-name-border{
border-bottom: 2px solid;
border-color: rgba(233,204,116, 0.1);
}
.player-name-border2{
border-bottom: 2px solid;
border-color: rgba(13, 33, 74, 0.2);
}
.player-name span{
display: block;
text-shadow:2px 2px #111;
}
.player-name2 span{
display: block;
text-shadow:2px 2px #fff;
}
.player-features{
margin: 1rem auto;
display: flex;
justify-content: center;
}
.player-features-col{
border-right: 2px solid;
padding: 0 3rem;
}
.player-features-col-border{
border-color: rgba(233,204,116, 0.1);
}
.player-features-col-border2{
border-color: rgba(13,33,74, 0.2);
}
.player-features-col span{
display: flex;
font-size: 2rem;
text-transform: uppercase;
}
.player-feature-value{
margin-right: 1rem;
font-weight: 700;
}
.player-feature-title{
font-weight: 300;
}
.player-features-col:last-child{
border:0;
}
.flip-box {
perspective: 1000px;
display: inline-block;
}
.fut-player-card{
position: relative;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .fut-player-card{
transform: rotateY(180deg);
}
.flip-box:hover .fut-front{
filter: alpha(opacity=100);
opacity:1;
}
.fut-front{
position: absolute;
}
.fut-front{
transition: opacity 0.8s linear 1.2s;
filter: alpha(opacity=0);
opacity: 0;
}
I thought it was OK with those elements but the transition is effective when the mouse leave the image and not when the mouse comes over the image :
.flip-box:hover .fut-front{
filter: alpha(opacity=100);
opacity:1;
}
.fut-front{
transition: opacity 0.8s linear 1.2s;
filter: alpha(opacity=0);
opacity: 0;
}
EDIT : It works on Firefox but not on Chrome

Answer 1

You can select the element with javascript and add:
addEventListener("mouseenter", function( event ) {
//change opacity here
})