Image noir et blanc en couleur au survol

Bonjour, bonsoir, bonne nuit, bonne année, ou ce que vous voulez.

Me voici, me voilà, me riz voilà ! Pour un tuto, encore un, et un petit en plus, encore et toujours je dois être fidèle au fait de poster des petits tutos, ce sont mes amis, ils me donnent des curly !

Trêve de plaisanterie, aujourd'hui je vais vous présenter un petit effet qui permet de passer une image en couleur au survol de celle-ci, elle sera en noir et blanc de base, mais elle peut aussi être rouge pour devenir bleu, si si.



Tout d'abord, avant toute chose, il va vous falloir utiliser un peu de Graphisme, prenez l'image que vous désirez utiliser et donnez lui sa couleur de base (Dans notre cas, noir & blanc), je me suis servi de mon avatar pour l'exemple ci-dessous :

Spoiler:

Maintenant, pour apprendre à faire ça, il vous faudra avoir appris les transitions et les pseudo élément notamment "hover", pensez donc à consulter les tutos en lien avec ceux-ci si jamais vous voulez pousser la chose un peu plus loin mais ils ne sont pas indispensable pour réaliser se tuto là.

Tout d'abord, mettons en place le html, il vous faudra ajoutez ceci là où vous devez avoir votre image de base :

Code:

<div id="image1"></div>

Maintenant, il vous faudra ajouter le css en lien avec celui-ci, pour rappeler il vous faudra l'ajouter à votre feuille de style css (PA > Affichage > Couleurs > Feuille de style CSS) ou entre balise "style" dans votre page HTML.

Pour l'image de base :

Code:

#image1{
background: url(http://image.noelshack.com/fichiers/2014/36/1409787523-1401284846-alzufen-avatar.png);
width: 170px;
height: 320px;
transition: 1s all;
}

/ ! \ Pensez à adapter la largeur et la hauteur à celle de votre image, elles doivent être identique. / ! \

Pour l'image au survol :

Code:

#image1:hover{
background: url(http://image.noelshack.com/fichiers/2014/22/1401284846-alzufen-avatar.png);
transition: 1s all;
}

Pour rappeler, si vous avez un quelconque soucis avec ce tuto il y a une section spécialement pour ça, Si vous souhaitez un effet particulier mais dans le même style, n'hésitez pas à poser vos questions ici ou à faire des demandes, je tâcherais de vérifier et d'y répondre si possible. Pour tout oublie, merci de me le signaler aussi

Comme le titre l'indique, c'est une solution alternative à ce tuto, cette solution donne un code HTML plus long mais fonctionnement sur tous les navigateurs même IE (si si). Bien entendu, il se peut que je découvre d'autres solutions alternatives intéressante à vous proposer, pour ça j'éditerais certainement ce message. Je ne vous réexplique pas le principe entier puisque vous l'avez au dessus, je vous explique seulement comment réaliser cette solution.

Tout d'abord, pour ceux étant sous chrome, inutile de revoir l'exemple, l'effet est le même (ou presque) la seule différence réside dans le code utilisé pour y parvenir. Pour les autres, voici l'effet (qui cette fois-ci devrait marcher sous n'importe quel navigateur à jour)

Spoiler:

Nous allons nous servir d'une mode que j'appelle "triche" j'utilise souvent se terme en codage.



Le principe est très simple, au lieu d'utiliser le code HTML fournis plus haut, utilisez celui-ci :

Code:

<div id="image1"><div id="image1mouse"></div></div>

Ensuite, une fois qu'on a ceci, il va nous falloir utiliser la même méthode CSS qu'au dessus, mais cette fois-ci ce n'est pas le fond qui va changer mais l'opacité. Appliquez donc vos images à vos deux ID (Inutile si vous utilisez une image à la place d'une div pour la seconde image)

Code:

#image1{
background: url(VOTRE_URL);
height: HAUTEUR DE VOTRE IMAGE EN PX;
width: LARGEUR DE VOTRE IMAGE EN PX;
}
#image1mouse{
background: url(VOTRE_URL);
height: HAUTEUR DE VOTRE IMAGE EN PX;
width: LARGEUR DE VOTRE IMAGE EN PX;
opacity: 0;
transition: 1s all;
}

A ce moment-là, vous ne devriez voir que la première image, et la deuxième ne s'affiche pas au survol... Ô désespoir comment faire ? Simple, il vous suffit d'ajouter ceci à votre CSS et... MAGIE :

Code:

#image1mouse:hover{
opacity: 1;
}

Merci du tuto Alzu, je classe (enfin)! =D

Merci pour ce tuto :) Bien classe en effet !