[Résolu] Opacité et transition

Bonjour,
Je tente de changer l'opacité (de 0 à 1) d'une image en mettant la souris sur un texte.
Je vais sur le <a> et l'opacité de l'image à côté change.
Je ne dois pas être loin, mais ça ne fonctionne pas
Mes CSS :

.imagasiat2{
	max-height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	border: 1vw solid #000000;
	vertical-align:middle!important;
	padding-right: 5vw;
    opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 3s, visibility 0s 0.5s;
}
.niveau3:hover + .niveau4 {	opacity: 1;}

et mon HTML :

      <div id="ancre_3" class="article">
<ul id="textasiat" class="niveau3" "textasiat" "animClass">
     <li><a href="#">bolo</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
     <li><a href="#">Ce lien sera</a></li>
</ul>
<img class="niveau4 imagasiat2" src="images/asiat.jpeg">  </div>

Merci pour votre aide,
LM

Bonjour,

Tu as toujours une erreur de syntaxe sur la déclaration des classes css dans ton html, les classes d'un même élément doivent être regroupées entre les guillemets de l'attribut class :

<ul id="textasiat" class="niveau3 textasiat animClass">

Concernant l'affichage de l'image, tu as oublié de restaurer sa visibilité lors du hover :

.niveau3:hover + .niveau4 {
  opacity: 1;
  visibility: visible;
}

'Visibility' n'est pas "transitionable" car n'est pas une valeur.
Je ne vois pas trop l'intérêt de sa présence vu que l'opacité de l'élément est déjà à zéro. L'éliminer permettrait la transition d'opacity.

Perso je ne mettrais pas le paramètre transition dans le css du :hover car cela induit la transition à l'apparition mais pas à la disparition.

PLGPPUR a écrit :

Promis Bongota, je vais supprimer ces "".
Je nettoie toujours mon code à la fin. Je travaille salement, je sais
Je vais faire attention dans les forums afin de ne pas me faire remonter les bretelles
Merci ENORMEMENT Pitet. C'est génial. Puis-je abuser de ta gentillesse pour la transition ?
Mais problème résolu
Encore merci !!!!!!
LM

Bah, c'était gentil, si tu voyais mon code, parfois

En principe, mais à tester dans ton cas

transition: all 3s ease-in-out;

Merci pour vos réponses.
@kerlutionec : J'ai pourtant l'impression que la transition se fait bien (de 0 à 1) avec le code de Bongota. Si je supprime"visibility", je n'ai plus rien.
@Bongota : J'ai toujours le même souci avec la transition finale (de 1 à 0)... un léger "fondu" puis une soudaine disparition Et là je rejoins kerlutionec ("cela induit la transition à l'apparition mais pas à la disparition.")
Encore merci pour votre précieuse aide,
P.

Je n'arrive pas à reproduire ton problème, de mon coté la transition fonctionne correctement :
https://jsfiddle.net/zhsy7wv1/

Bonsoir, ou bonjour Pitet,
J'ai eu du mal à reproduire ma transition telle qu'elle est sur mon site. Avec une transition de 1 à 0 brutale.
Si je me limite aux CSS nécessaires, tout fonctionne. J'ai vu et revu mes CSS et je suis bien incapable de dire ce qui cause ce dysfonctionnement.
Je te donne le jsfidlle :
https://jsfiddle.net/herde2/2pn0fv4c/11/
Bonne soirée
P.