HTML/Bouton zoom

Révision datée du 15 juin 2021 à 21:00 par Fylip22 (discussion | contributions) (Page créée avec « <source lang="html"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test image animée</title> <style> h1 { background: #44f;... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test image animée</title>
    <style>
      h1 {
          background: #44f;
          color: white;
          padding: .25em;
      }

      #bouton {
          display: flex;
          flex-wrap: nowrap;
      }

      #bouton > div {
          margin: 10px;
      }

      .google, .glpi, .konoburo {
          box-sizing: border-box;
          transition: transform .2s;
          padding-left: 1em;
          width: 200px;
          transform: scale(0.95); 
      }

      .google:hover, .glpi:hover, .konoburo:hover {
          transform: scale(1); 
        }
    </style>
  </head>
  <body>
    <h1>Bouton avec image zoomée au survol</h1>
    <div id="bouton">
      <div class="google"><a href="#""><img src="img/wiki.png" /></a></div>    
      <div class="glpi"><a href="#""><img src="img/wiki.png" /></a></div>
      <div class="konoburo"><a href="#""><img src="img/wiki.png" /></a></div>
    </div>
  </body>
</html>