Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mettre un texte au milieu d'une image

Mettre un texte au milieu d'une image

Sujet résolu
    2 février 2020 à 19:53:48

    Bonjour,

    Actuellement je développe un site web en HTML, en CSS et en JavaScript.

    Je cherche depuis quelque temps un moyen pour reproduire un effet que l'on trouve sur ce site : https://www.fermedubec.com/

    Les images, pour information, sont des liens avec un texte au centre de type <span> avec un petit effet sympa car au moment où on les survole, il y a un léger zoom.

    Merci d'avance pour vos réponses !!

    -
    Edité par Titicplusplus 2 février 2020 à 19:54:53

    • Partager sur Facebook
    • Partager sur Twitter
      3 février 2020 à 0:34:34

      Salut ! Je t'ai fait ça en HTML + CSS

      J'ai pas un bac +5 en HTML/CSS mais ça fonctionne ;)

      HTML : 

      <div class="zoom">
          <span> Hello World </span>
      </div>


      CSS :

      .zoom{
      	display: table-cell;
      	height: 500px;
      	width: 1025px;
      	text-align: center;
      	vertical-align: middle;
      	background: url("https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg") no-repeat center; /* Change l'URL par l'image que tu souhaites */
      	background-size: 100%;
      	border: 3px solid black;
      	transition: 1.2s; /* Le délai où l'image va dé-zoomer */
      }
      
      .zoom:hover{
      	background-size: 120%; /* La taille de l'image une fois que le curseur sera sur le DIV */
      	transition: 1.2s; /* Le délai du zoom de l'image */
      }
      
      .zoom > span{
      	font-size: 1.5em;
      }



      • Partager sur Facebook
      • Partager sur Twitter
        3 février 2020 à 12:42:56

        Coucou Luruk-Hai

        Merci pour ta réponse, j'ai essayé et ça a marcher !!

        C'est parfaitement ce que je voulais !!

        • Partager sur Facebook
        • Partager sur Twitter

        Mettre un texte au milieu d'une image

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