Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

Comment faire une transition entre deux background en css3

Si vous utilisez un peu les transitions avec CSS3 vous avez sans doute constaté qu’il n’était pas possible d’appliquer une transition entre deux images en background.

Le but ici est de réaliser un bouton avec une transition au survol, ce qui devrait donner ça:

(Bien sûr si vous êtes sous IE9 ou moins vous ne verrez rien de particluier, pensez à utiliser un navigateur compatible avec css3).

L’astuce est la suivante:

  • En background de votre lien vous affichez l’image qui doit apparaître lors du survol.
  • Ensuite vous placez dans votre lien l’image (pas en background mais bien directement dans le code html) qui doit être visible lorsque le lien n’est pas survolé.
  • Enfin, il suffit de faire disparaître (propriété opacity) l’image contenue dans le lien lors de survol avec une transition css3.

Voila ce que ça donne au niveau code:

Le code html


<a href="#" class="btnCSs3BgTransition">
<img src="mon_image.png" alt="" />
</a>

Le code css


.btnCSs3BgTransition {
width:322px;
height:92px;
display:block;
background:url(mon_image_au_survol.png);
}
.btnCSs3BgTransition img{
opacity: 1;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
border:0;
}
.btnCSs3BgTransition img:hover{
opacity:0;
}

Poster un Commentaire

3 Commentaires sur "Comment faire une transition entre deux background en css3"

Recevoir un email pour
avatar
Trier par:   plus récent | plus vieux | Plus de vote
Sam
Invité

Code que je vais mettre dans mes tablettes et que je ressortirai quand tous les navigateurs seront vrailment compatible CS3. Un grand merci pour ce code.

Marc
Invité

Merci pour ton code, le rendu est du plus bel effet !
Il est très utile pour un bouton de contact ou d’ajout au panier !

Drago
Invité
Drago

Super, ça marche super bien pour mes icones sociales :) Merci beaucoup beaucoup.

wpDiscuz