Hola que tàl ?
Ça fait un petit moment que je n’ai pas dérouillé mes doigts sur un article, et pourtant j’en avait besoin 🙂
Je vais vous faire partager une petite astuce en pure CSS (ou pur CSS en français hehe) pour faire un joli effet de transition d’image au survol du curseur de la souris. Et oui, de temps en temps, du design ça fait du bien dans ce monde fou, tiraillé entre le pouvoir et l’argent… (ne vous inquiétez pas je ne suis toujours pas parti en Hollande en pèlerinage armé de claquettes,d’un bandana pur coton et d’une tente oxo-biodégradable à motif de fleurs portant un baluchon rempli d’herbe avec une chemise blanche à col ouvert afin de trouver le dieu Marie Ruana).
Après cette longue parenthèse qui en dit long sur mon état de fatigue je vous propose de vous montrer de suite ledit effet : DEMO
Bon concrètement on va appliquer un background à un type de balise qui vous servira à afficher l’animation, et l’effet sera réalisé en changeant le point de vue du background d’une image à une autre avec une propriété que je vais présenter un peu plus loin :
Admettons que le cadre « vue 1 » en vert soit notre balise <div> avec la propriété CSS background-position définie à cet endroit (sur le billet en noir et blanc), au survol de la souris, cette propriété change de coordonnées et va se placer sur la vue 2 (cadre bleu). Avec entre temps une transition smooth de 0.2 secondes par exemple, cela donne une effet de montée de l’icône et de coloration ! (on peut même rajouter la propriété CSS pour le statut active, afin de converser l’icône en couleur lorsque l’on pointe encore sur un de ses enfants (ex: sous-menu).
Voici l’image en question que j’ai utilisée, et qui contient tous les icônes dont j’ai besoin :
nav.menu-custom-wiki ul li a div.main-menu-icon {
float:left;
width:75px;
height:75px;
background:url("/ressources/images/full_icon_grid.png");
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
Ici on peut voir que le div de la classe main-menu-icon que je place dans mes liens de mon menu possède les propriétés ci-dessus. La limite de la taille de mon image est de 75×75 pixels et je lui met en background l’image géante contenant tous les icônes que je veux bien ordonnés, comme ci-dessus.
Vous comprenez ici ce qui commence à se passer ?
Par défaut je vais faire pointer le cadre de 75×75 pixels sur l’icône voulu grisé puis, au survol de la souris nous adapterons les coordonnées du cadre en question pour qu’il monte sur son double coloré.
Pour l’animation j’ai choisi de faire une transition entre les deux position de 0.2 secondes en utilisant les webkits de tous les navigateurs communs, pour une meilleure compatibilité.
Ensuite nous allons passer sur le CSS concernant les deux états : hover et static.
/* Part 1- position par défaut : etat au repos des icônes */
nav.menu-custom-wiki > ul > li.cat_iphone div.main-menu-icon{ background-position: 570px -3335px; }
nav.menu-custom-wiki > ul > li.cat_mail div.main-menu-icon{ background-position: 80px -1638px; }
nav.menu-custom-wiki > ul > li.cat_internet div.main-menu-icon{ background-position: 565px -3848px; }
nav.menu-custom-wiki > ul > li.cat_computer div.main-menu-icon{ background-position: 80px -3170px; }
nav.menu-custom-wiki > ul > li.cat_printer div.main-menu-icon{ background-position: 80px -3335px; }
nav.menu-custom-wiki > ul > li.cat_software div.main-menu-icon{ background-position: 470px -2145px; }
nav.menu-custom-wiki > ul > li.cat_home div.main-menu-icon{ background-position: 470px -2995px; }
nav.menu-custom-wiki > ul > li.cat_tools div.main-menu-icon{ background-position: 180px -955px; }
nav.menu-custom-wiki > ul > li.cat_server div.main-menu-icon{ background-position: 180px -3510px; }
nav.menu-custom-wiki > ul > li.cat_network div.main-menu-icon{ background-position: 180px -1978px; }
nav.menu-custom-wiki > ul > li.cat_phone div.main-menu-icon{ background-position: 470px -3510px; }
nav.menu-custom-wiki > ul > li.cat_admin div.main-menu-icon{ background-position: 270px -1300px; }
/* Part 2- position au survol souris : etat actif des icônes */
nav.menu-custom-wiki > ul > li.cat_iphone:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_iphone.active div.main-menu-icon { background-position: 570px -3255px; }
nav.menu-custom-wiki > ul > li.cat_mail:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_mail.active div.main-menu-icon { background-position: 80px -1553px; }
nav.menu-custom-wiki > ul > li.cat_internet:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_internet.active div.main-menu-icon { background-position: 565px -3765px; }
nav.menu-custom-wiki > ul > li.cat_computer:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_computer.active div.main-menu-icon { background-position: 80px -3090px; }
nav.menu-custom-wiki > ul > li.cat_printer:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_printer.active div.main-menu-icon { background-position: 80px -3255px; }
nav.menu-custom-wiki > ul > li.cat_software:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_software.active div.main-menu-icon { background-position: 470px -2065px; }
nav.menu-custom-wiki > ul > li.cat_home:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_home.active div.main-menu-icon { background-position: 470px -2915px; }
nav.menu-custom-wiki > ul > li.cat_tools:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_tools.active div.main-menu-icon { background-position: 180px -870px; }
nav.menu-custom-wiki > ul > li.cat_server:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_server.active div.main-menu-icon { background-position: 180px -3428px; }
nav.menu-custom-wiki > ul > li.cat_network:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_network.active div.main-menu-icon { background-position: 180px -1895px; }
nav.menu-custom-wiki > ul > li.cat_phone:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_phone.active div.main-menu-icon { background-position: 470px -3428px; }
nav.menu-custom-wiki > ul > li.cat_admin:hover div.main-menu-icon, nav.menu-custom-wiki > ul > li.cat_admin.active div.main-menu-icon { background-position: 270px -1215px; }
Ici on constate que la partie 1 du CSS, les icônes au repos, on définit la propriété background-position aux coordonnées en pixel correspondant à l’image en noir et blanc voulue.
