French

Animation CSS d'un élément au survol de son élément parent

Mon 1er texte
Mon 2e texte
/* Texte */ 
.monTexte{ 
position: absolute; 
top:50%; 
left:50%;  
transform: translate(-20%, -50%); 
animation-duration: 1s; 
animation-fill-mode: forwards; 
text-shadow: 5px 5px 3px #7f7f7f; 

 
.cadre{ 
background-image: url(../Files/Image/smiley1.png); 
background-repeat: no-repeat; 
background-position: center left; 
background-size: contain; 
transition-duration: 1s; 

 
.cadre:hover{ 
background-image: url(../Files/Image/smiley2.png);  

 
/* Effacement progressif */ 
@keyframes fadeOut { 
from { opacity: 1; }  
to { opacity: 0; } 

 
/* Apparition progressive */ 
@keyframes fadeIn { 
from { opacity: 0; }  
to { opacity: 1;} 

 
 
/* État normal */ 
.cadre .texte1{ 
animation-name: fadeIn; 

 
.cadre .texte2{ 
animation-name: fadeOut; 

 
/* Action au survol de l'élément parent */ 
.cadre:hover .texte1{ 
animation-name: fadeOut; 

 
.cadre:hover .texte2{ 
animation-name: fadeIn; 
}

/* Centrage du texte */ 
.monTexte{ 
position: absolute; 
top:50%; 
left:50%;  
transform: translate(-25%, -50%); 
animation-duration: 1s; 
animation-fill-mode: forwards;  

 
.cadre{ 
background-image: url(../Files/Image/smiley1.png); 
background-repeat: no-repeat; 
background-position: center left; 
background-size: contain; 
transition-duration: 1s; 

 
.cadre:hover{ 
background-image: url(../Files/Image/smiley2.png);  

 
/* Effacement progressif */ 
@keyframes fadeOut { 
from {opacity: 1;}  
to {opacity: 0;} 

 
/* Apparition progressive */ 
@keyframes fadeIn { 
from {opacity: 0;}  
to {opacity: 1;} 

 
 
/* État normal */ 
.cadre .texte1{ 
animation-name: fadeIn; 

 
.cadre .texte2{ 
animation-name: fadeOut; 

 
/* Action au survol de l'élément parent */ 
.cadre:hover .texte1{ 
animation-name: fadeOut; 

 
.cadre:hover .texte2{ 
animation-name: fadeIn;