Créer un arrière plan dégradé animé au survol

Que ce soit pour mettre en valeur une partie de votre site internet ou une citation comme dans cet exemple, générer et ajouter un dégradé au background peut donner une touche très moderne à votre site internet. Découvrons dans cet article comment réaliser ceci facilement !

Louis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Créer un arrière plan dégradé animé au survol

1ère étape

Le code HTML.

HTML

<div class="box">
    <p>La plupart des gens trouvent le concept
   de la programmation évident, mais la réalisation
   impossible.</p>
    <h2>Alan Jay Perlis</h2>
</div>

<div class="background"></div>

2ème étape

Stylisons le boîte (.box).

CSS

.box {
  position: relative;
  width: 300px;
  height: 300px;
  background: white;
  transition: all 0.5s;
  z-index: 2;
  padding: 30px;
}

3ème étape

Ajoutons la guillemet du haut.

CSS

.box::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: 5px;
  width: 100%;
  height: 100%;
  font-size: 120px;
  opacity: 0.2;
}

Le code \201C nous permet d’afficher un   guillemet de citation ouvert.

4ème étape

Ajoutons maintenant la guillemet du bas.

CSS

.box::after {
  content: '\201D';
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 120px;
  opacity: 0.2;
}

5ème étape

Stylisons le texte et le titre.

CSS

.box p {
  margin: 0;
  padding: 10px;
  font-size: 1.2rem;
}

.box h2 {
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: 30px;
  right: 30px;
  font-size: 1.5rem;
}

6ème étape

Dynamisons le style de la boîte au survol avec la souris.

CSS

.box:hover {
  color: #f2f2f2;
  box-shadow: 20px 50px 100px rgba(0, 0, 0, 0.5);
}

Ici, nous modifions la couleurs du texte et le   nom de l’auteur lorsque nous passons le curseur   sur la carte.

7ème étape

Stylisons maintenant l'arrière-plan.

CSS

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s;
  width: 100%;
  height: 100%;
}

8ème étape

Terminons cet effet avec le design du menu.

CSS

.box:hover, .box:hover ~ .background {
  opacity: 1;
  background: #e2a9e5;
  background: -moz-linear-gradient(-45deg, 
  #e2a9e5 15%, #2b94e5 100%);
  background: -webkit-linear-gradient(-45deg, 
  #e2a9e5 15%,#2b94e5 100%);
  background: linear-gradient(-45deg, #e2a9e5
 15%,#2b94e5 100%);
}

Nous allons ici gérer l’affichage du texte avec le changement de couleur au moment du passage du curseur sur la carte.

Nous allons également gérer ici l’affichage de l’arrière plan, donc cette effet de fondu entre les couleurs.

Catégorie : Développement