Forum : Transition sur un dégradé

Bonsoir,

J'ai un dégradé en diagonale, quand je passe ma souris dessus l'une des couleurs prend la totalité de l'espace. J'aimerais appliquer une transition (pour donner un effet un peu plus "smooth"), à ma triste découverte, la règle CSS transition ne fonctionne pas.

J'aimerais donc savoir comment vous feriez ça ?

Le dégradé par défaut :

Le dégradé quand la souris passe dessus

2 réponses

StanislasP

Réponse acceptée

Bonjour,

Je ferait un truc comme ca :

#exemple {
  width:100%;
  height:150px;
  line-height:150px;
  text-align: center;
  color: #dbfff7;
  font-size: 44px;
  font-family: verdana;
  background-color: #f2b608;
  background-image: linear-gradient(135deg, #9f25ff 0%, rgba(242,182,8,0) 100%);
  transition: background 300ms ease-in-out;
}
#exemple:hover {
  background-color: #9f25ff;
}

Exemple jsfiddle

Laznet

Auteur

C'est génial ! Merci