Bonjour,

Voici une semaine que j'essaye de résoudre un problème qui paraît pourtant simple. J'ai cherché sur de nombreux forums la solution mais rien ne fonctionne donc le problème doit être ailleurs.

Je débute en codage et je cherche à réaliser la page d'accueil de mon site web portfolio. Il y a un simple header et le body est composé de 6 images (3 images sur 2 lignes). Le but est simple : quand on passe la souris sur l'image, celle-ci se baisse en opacité (pour faire apparaître le background blanc) et le titre apparaît dessus au centre en opacité.

Problème : le hover fonctionne sur l'image, mais je n'arrive pas à indiquer à ma div que le texte doit apparaître en même temps.

Avant de vous laisser avec le code HTML :

- "gros_conteneur" me permet d'accueillir tout mes petit_conteneur répété.

- "petit_conteneur" est composé de mon image et de mon titre. Il en existe 6.

Code HTML:

<div class="gros_conteneur">

<div class="petit_conteneur">

<a href="Pages/page1.html"><img src="Images/mojito_tattoo.jpg" alt="mojitotattoo"></a>

<div class="petit_conteneur_texte"><h3>MOJITO TATTOO</h3></div>

</div>

(5 autres "petit_conteneur" puis fermeture de "gros_conteneur")

Code CSS :

.gros_conteneur{

display:flex;

flex-wrap: wrap;

justify-content: space-around;

}

.petit_conteneur{

background-color: #FFFFFF;

width: 30%;

margin-bottom: -5vw;

}

.petit_conteneur img{

width: 100%;

height: auto;

}

.petit_conteneur img:hover{

opacity: 0.3;

transition: 1s;

}

.petit_conteneur_texte{

text-align: center;

position: relative;

top: -15vw;

opacity: 0;

}

.petit_conteneur_texte:hover{

opacity: 1;

transition: 0s;

}

J'espère avoir bien expliqué mon problème et trouver une réponse adaptée.

Merci beaucoup de m'éclairer

Bonjour,

As-tu essayé de suivre les solutions décrites dans ce sujet ? : https://openclassrooms.com/forum/sujet/utilisation-de-hover-pour-changer-image