Effets Avancés de Survol d'Images Avec Seul CSS

La fonction la plus courant des effets de survol est mise en lumière les liens du texte ou les boutons. Mais ils ont plus de fonctions.

Effets de survol ajoutent un élément de l'interactivité à un site web. Ils ont des effets puissants lorsqu'ils sont appliqués aux images. Ils peuvent aussi avoir un grand impact sur l'utilisateur en rendant le site web bien conçu.

Le survol est un effet qui apparaît lorsque vous placez le curseur de la souris sur un objet. Il est surtout utilisé pour le style et l'ergonomie.

Dans ce tutoriel, nous allons vous montrer comment créer des effets créatifs de survol pour votre images en utilisant seul CSS.

1. Créez HTML.

Ajoutez la balise <figure> avec une classe "image". La balise <figure> est utilisée pour indiquer le contenu indépendant.
Utilisez la balise <figcaption> pour inclure une légende ou une explication au contenu de la balise <figure>.

<figure class="image">
  <img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" />
  <figcaption>
    <h3>W3docs</h3>
  </figcaption>
</figure>

2. Ajoutez CSS.

Définissez max-width, min-width et max-height de l'image.
Définissez la position à "relative", afin que l'élément soit relatif de se position normale.
Définissez overflow à "hidden", afin que le contenu soit coupé pour remplir la boîte de remplissage.
Définissez la couleur de figcaption et l'alignement du texte.

figure.image {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #eeeeee;
  text-align: center;
}

Ajoutez la transition de la classe image. On utilise le sélecteur * (astérisque ) qui sélectionne tous les élément d'un document.

figure.image * {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

Définissez max-width de l'image à 100%.
Définissez le niveau de transparence d'un élément.

figure.image img {
  max-width: 100%;
  position: relative;
  opacity: 0.6;
}

Notre pas suivant se compose d'ajouter les styles à h3.

Définissez background et position du h3.
Spécifiez la propriété transform. Elle définit la transformation 2D ou 3D de l'élément. Elle permet de faire pivoter, redimensionner, incliner ou traduire l'élément.
Définissez text-transform à "uppercase", afin que tous les caractères du chaque mot soient en majuscule.
Définissez font-weight. Ici, nous la définissons à 400.

figure.image h3 {
  position: absolute;
  left: 50px;
  right: 50px;
  display: inline-block;
  background: #000;
  -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  padding: 15px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

Maintenant définissons un style pour le pseudo-élément :before qui est un contenu généré qui ajoute n'importe quel type de l'élément avant le contenu.

Définissez height et width de l'élément et définissez la couleur.
Spécifiez transition en définissant transition-duration à 0.3.
Spécifiez la propriété transform. Faisez privoter l'élément par 110 degrés et le traduisez le long de l'axe y par -50%.

figure.image:before {
  height: 130%;
  width: 130%;
  top: 0;
  left: 0;
  content: "";
  background: #cccccc;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  -moz-transform: rotate(110deg) translateY(-50%);
  -ms-transform: rotate(110deg) translateY(-50%);
  -o-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

L'étape suivane se compose de définir l'effet de survol à notre image, h3, et :before.

figure.image:hover img,
figure.image.hover img {
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
figure.image:hover h3,
figure.image.hover h3 {
  -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.image:hover:before,
figure.image.hover:before {
  -moz-transform: rotate(110deg) translateY(-150%);
  -ms-transform: rotate(110deg) translateY(-150%);
  -o-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}

Rassemblons les morcaux de notre code:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      figure.image {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 220px;
        max-width: 310px;
        max-height: 220px;
        width: 100%;
        background: #000000;
        color: #eeeeee;
        text-align: center;
      }
      figure.image * {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      figure.image img {
        max-width: 100%;
        position: relative;
        opacity: 0.6;
      }
      figure.image h3 {
        position: absolute;
        left: 50px;
        right: 50px;
        display: inline-block;
        background: #000;
        -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        padding: 15px 5px;
        margin: 0;
        top: 50%;
        text-transform: uppercase;
        font-weight: 400;
      }
      figure.image:before {
        height: 130%;
        width: 130%;
        top: 0;
        left: 0;
        content: "";
        background: #cccccc;
        position: absolute;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transform: rotate(110deg) translateY(-50%);
        -moz-transform: rotate(110deg) translateY(-50%);
        -ms-transform: rotate(110deg) translateY(-50%);
        -o-transform: rotate(110deg) translateY(-50%);
        transform: rotate(110deg) translateY(-50%);
      }
      figure.image:hover img,
      figure.image.hover img {
        opacity: 1;
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
      figure.image:hover h3,
      figure.image.hover h3 {
        -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      }
      figure.image:hover:before,
      figure.image.hover:before {
        -moz-transform: rotate(110deg) translateY(-150%);
        -ms-transform: rotate(110deg) translateY(-150%);
        -o-transform: rotate(110deg) translateY(-150%);
        transform: rotate(110deg) translateY(-150%);
      }
    </style>
  </head>
  <body>
    <h2>Effet avancé de survol</h2>
    <figure class="image">
      <img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="W3docs" />
      <figcaption>
        <h3>W3docs</h3>
      </figcaption>
    </figure>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple de la transformation tridimensionnelle :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
        width: 250px;
        height: 250px;
        margin: 20px auto 40px auto;
        perspective: 1000px;
      }
      .example a {
        display: block;
        width: 100%;
        height: 100%;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: cover;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(80deg);
        -moz-transform: rotateX(80deg);
        -ms-transform: rotateX(80deg);
        -o-transform: rotateX(80deg);
        transform: rotateX(80deg);
        -webkit-transition: all 0.8s;
        -moz-transition: all 0.8s;
        -o-transition: all 0.8s;
        transition: all 0.8s;
      }
      .example:hover a {
        -webkit-transform: rotateX(10deg);
        -moz-transform: rotateX(10deg);
        -ms-transform: rotateX(10deg);
        -o-transform: rotateX(10deg);
        transform: rotateX(10deg);
      }
      .example a:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: #cccccc;
        -webkit-transform: rotateX(60deg);
        -moz-transform: rotateX(60deg);
        -ms-transform: rotateX(60deg);
        -o-transform: rotateX(60deg);
        transform: rotateX(60deg);
        transform-origin: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Effet avancé de survol</h2>
    <div class="example">
      <a href="#"></a>
    </div>
  </body>
</html>

Essayez-vous-même!