I'm making a portfolio project for class and I've been trying to make a fade in - fade out opacity animation with CSS for some images that act as links. I've succesfully been able to make the fade in on hover, but not the fade out when the mouse leaves the image, it just instantly puts the opacity at 1 again.
I followed this other question's answer and have made a JSFiddle (images and links not the ones in the actual web i'm making, but the structure of the objects affected is the same) for you to see what i mean.
I've tried putting the transition in body main .proyectos div article with the same results. When putting it in body main .proyectos div article img or body main .proyectos div article a img it doesn't work at all, not even the fade in.
This part of the web DOES NOT have any JavaScript code attatched to any of its elements.
Your selectors are wrong, see: mdn selectors Since you are already using classes, your css definitions can use those. Instead of building a kind of path to the element body main .proyectos div, .proyectos > div with the child selector > works. But the div also has a class, which makes it even easier to select with .galería_landing :
.galería_landing {
display: grid;
grid-template-columns: repeat(11, 1fr);
grid-template-rows: repeat(2, 50%);
grid-gap: 2%;
margin-bottom: 10%;
}
Selecting the children which should apply the :hover effect can utilyze the child selector:
.galería_landing > article {
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.galería_landing > article:hover{
opacity: 0.9;
}
It's important to define the trasition in the base element without the hovered state, otherwise it will be removed when the hover ends and no transitioning back would be applied.