Partage
  • Partager sur Facebook
  • Partager sur Twitter

Utilisation de :hover pour changer image

Ajouter à une image lorsque l'on passe au dessus un texte avec fond

Sujet résolu
    26 janvier 2020 à 14:14:42

    Bonjour,

    Voilà le lien du site sur lequel je travaille dans le parcours développeur web junior : http://www.cirtelo.fr/OPC/P1_langer_laurence/index.html 

    J'essaie de faire apparaître un texte sur fond marron pour chaque image du portfolio.

    J'ai essayé avec overlay, mais mes images sont dans des éléments de conteneur par dans 1 seul conteneur. J'ai réussi à l'appliquer au conteneur, mais pas aux images seules.

    Du coup, je tente avec un simple hover, mais cela modifie l'image et je ne sais pas comment y ajouter du texte.

    Auriez-vous une solution ? J'ai déjà parcouru le forum, et W3C schools sans résultat.

    Merci d'avance 

    • Partager sur Facebook
    • Partager sur Twitter
      26 janvier 2020 à 16:16:57

      Regarde au niveau des positions et de z-index 

      Tu as du css à appliquer sur le conteneur, sur l'image et sur le texte, éventuellement un effet de transition.
      Il faut gérer la position des block, et des dépassement.
      Utiliser une position relative sur l'image afin de pouvoir faire fonctionner le z-index afin de faire passer le texte derrière l'image et donc d'être caché sans survole.
      Un display block pour gérer le flux du texte, et lui appliquer un position absolute pour le mettre hors flux. 


      Pour le conteneur j'aurais pensé à ça : 

      position: relative;
      overflow: hidden; 


      Pour l'image : 

      z-index: 1;
      position: relative;  


      Pour le text 

      display: block;
      position: absolute;   /* positionnement hors flux */
      color: white;        
      background: brown;

      Pour bien cacher ton texte, tu peux lui mettre une position hors cadre, comme un bottom -100% par exemple, puisque tu utilises un overflow hidden, il ne sera plus visible, et lors d'un hover: faire un bottom 200% pour le faire revenir.

      • Partager sur Facebook
      • Partager sur Twitter
        28 janvier 2020 à 13:07:45

        Merci,

        Je n'ai pas réussi en suivant ta proposition.

        J'ai fini par trouver sur https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity une référence de code qui devait fonctionner mais ce n'est pas le cas.

        Le CSS :

        /*Eléments des images du portfolio*/
        .container3 {
        	/*position:relative; a voir si besoin*/
        	display: flex;
        	flex-wrap: nowrap;
        	justify-content: space-around;
        	height:30vh;
        	width:85%;
        	margin-right:10%;
        	margin-left: 5%;
        }
        .element3
        {
        	width: 25%;
        	height: 30vh;
        	vertical-align:middle;
        	position: relative; /* application position relative à l'élément parent*/
        	
        }
        .imgprojects
        {
        	opacity: 1;
        	display: block;
        	width:95%;
        	height:90%;
        	vertical-align: middle;
        	transition: .5s ease;
        	backface-visibility: hidden;
        }
        .item
        {
        	transition: .5s ease;
        	opacity: 0.5;
        	position: absolute;
        	top: 80%;
        	bottom: 0;
        	width: 95%;
        	background-color: #582900;
        	transform: translate(-50%, -50%);
        	-ms-transform: translate(-50%, -50%);
        	justify-content: left;
        }
        .element3:hover .imgprojects {
        	background-color: #582900;
        	opacity : 0.8;
        	bottom: 0;
        	left: 0;
        	height : 13vh;
        	width:95%;
        }
        .element3:hover .item
        {
        	opacity: 0.9;
        }
        
        .text {
        	Font-family: RobotoBold;
        	color: white;
        	display: block;
        	position: absolute;   /* positionnement hors flux */
        }
        .text2 {
        	Font-family: Roboto;
        	color: white;
        	display: block;
        	position: absolute;   /* positionnement hors flux */
        }

        Et le html :

        <div class="container3" id="popup-menu1">
                   <div class="element3">
                       <img src="images/portfolio/01.jpg" alt="lunettes" class="imgprojects">
                       <div class="item">
                           <div class="text">Boutique d'optique</div>
                           <div class="text2">Le site de vente de lunettes en ligne</div>
                       </div>
                   </div>

        En fait, je me demande si je dois poursuivre dans la voie du hover ou plutôt de l'overlay.

        Dans les deux cas, j'ai l'impression que si je l'applique à un conteneur, ça fonctionne mais pas si je l'applique à un élément de conteneur.

        Si vous avez des pistes, merci d'avance !



        • Partager sur Facebook
        • Partager sur Twitter
          28 janvier 2020 à 15:02:40

          Bonjour,

          Voici comment corriger ton CSS pour obtenir le même rendu que le résultat que tu as mis en lien:

          .container3 {
              justify-content: space-between;
              flex-wrap: wrap;
              width: auto;
              height: auto;
              margin: 0 70px;
          }
          
          .element3 {
              position: relative;
              width: calc(25% - 10px);
              height: auto;
              margin-bottom: 10px;
          }
          
          .item {
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              width: auto;
              transform: inherit;
              display: flex;
              flex-direction: column;
              justify-content: center;
              text-align: center;
              opacity: 0;
          }
          
          .imgprojects {
              width: 100%;
              height: auto;
          }
          
          .element3:hover .imgprojects {
              width: 100%;
              height: auto;
          }


          Pour tester immédiatement le rendu, il te suffit juste d'ajouter ce bout de code à la fin de ton fichier CSS. Après, à toi de replacer chaque propriétés au bon endroit et d'y faire du nettoyage. J'ai du surcharger plusieurs de tes propriétés CSS comme des width, des height, des margins, etc ou pour corriger des placements non adaptés, donc il suffira de les supprimer directement ou les corriger.

          • Partager sur Facebook
          • Partager sur Twitter
            29 janvier 2020 à 16:02:27

            Merci beaucoup, je teste au plus vite (je suis le parcours développeur web tout en travaillant). Et je te réponds dès que c'est fait.

            Bien cordialement

            • Partager sur Facebook
            • Partager sur Twitter
              3 février 2020 à 9:45:40

              Bonjour,

              je viens de voir que tu avais intégré la correction.

              Cependant tu n'as pas nettoyé ton code en supprimant tes valeurs inutiles.

              Tu peux les trouver en ouvrant ton inspecteur d'éléments et en supprimant toutes les propriétés qui sont surchargées (elles sont rayées), pour .container3, .element3, .item, .imgprojects ainsi que pour .element3:hover .imgprojects.

              Comme ceci:

              • Partager sur Facebook
              • Partager sur Twitter
                3 février 2020 à 10:49:03

                Oui, en fait je suis en arrêt maladie, donc je n'ai pas le droit de travailler ma formation pendant cette période. Mais je vais bien nettoyer le code et tenter d'écrire pourquoi j'ai bloqué et la logique de la solution pour d'autres qui comme moi auraient du mal.

                Merci à toi

                • Partager sur Facebook
                • Partager sur Twitter
                  3 février 2020 à 10:54:46

                  Pas de soucis, bon courage à toi.

                  Au moins, tu as toutes les informations pour savoir comment corriger. ;)

                  Si besoin de précisions n'hésites pas à demander.

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Utilisation de :hover pour changer image

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