Partage
  • Partager sur Facebook
  • Partager sur Twitter

Faire apparaître un texte sur image

Faire apparaître un texte sur image pendant qu'elle baisse en opacité

    30 janvier 2020 à 11:34:00

    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

    • Partager sur Facebook
    • Partager sur Twitter

    Faire apparaître un texte sur image

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown