[Apprenti] Effet de colorisation au survol d'une image

Bonjour,

Nous allons étudier un petit bout de code qui va modifier l'apparence de vos images. Cela va transformer vos images en noir et blanc. Celle-ci retrouveront leur couleurs au survol de la souris



Il s'agit de CSS3, donc la dernière version de CSS cela signifie que sur des navigateurs dont la version est plus ancienne l'effet n'est pas compris et donc n'apparait pas.

1. Explication et compréhension :

Pour ce cas de figure je vais utiliser une dénomination qui est assez courante sur Tumblr, c'est ce que l'on appelle une charte de nommage. En gros pour s'y retrouver on a tendance à appeler les éléments avec le même nom.

A. Les images sont en gris :

Code:

.photo img {
        -webkit-filter: grayscale(100%);
    }

.photo : c'est une classe qui est associé à notre élément qui contient les images comme une division par exemple

img : c'est une appellation clef qui signifie que l'on désigne tous les éléments de type image.

Le code indique que l'on applique à l'image un gris, celui-ci agit comme un filtre.

Si vous avez une autre division contenant les images s'appelant par exemple .picture, alors l'effet ne s'appliquera pas aux images.

En effet le code CSS ne va s'appliquer qu'aux images contenues dans des divisions .photo


B. Les images en couleur :

Code:

.photo:hover img {
                -webkit-filter: grayscale(0);
    }

.photo:hover : cela signifie que l'action concerne uniquement le moment où la souris se trouve sur l'image

On indique qu'au survol de l'image on ne veut plus appliquer de filtre gris


C. Récap du code à ajouter au css :

Code:

.photo img {
        -webkit-filter: grayscale(100%);
    }
    .photo:hover img {
        -webkit-filter: grayscale(0);
    }

2. Quel est votre cas ?

Ou pour reformuler avez vous du bol ? Allez vous pouvoir utiliser le code tel quel ou il va falloir faire un petit effort de plus...

A. Plan A : vous êtes chanceux

Pour le savoir c'est très simple il vous suffit d'ajouter le code que j'ai donné plus haut dans la partie d'ajout de CSS.
Pour ceux qui ont des blogs et qui souhaitent savoir où s'ajoute le CSS je vous renvoie vers ce tutoriel : [Fiche] Revue de Blog pour savoir où modifier le HTML et le CSS

B. Plan B : allons voir le code

Oups utilisateur de Tumblr vous n'avez pas de chance et le créateur de votre template n'a pas utilisé la classe photo ou il l'a peut être utilisé mais cela entre en conflit avec notre code ajouté...

Bien nous allons prendre les choses en main et créer notre propre classe. Dans la partie css vous allez changer le .photo pour donner un autre nom. Pour l'exemple et parce que je n'ai pas peur du ridicule ce sera .superfu et on va enlever la partie img car c'est à l'image que l'on va donner la classe

Code:

.superfu{
        -webkit-filter: grayscale(100%);
    }
    .superfu:hover{
        -webkit-filter: grayscale(0);
    }

Il nous faut à présent ajouter cette classe dans la partie html pour qu'elle puisse fonctionner. Mais où ?
On va cibler deux choses les photo qui sont les posts comprenant une seule image et les photoset les posts qui ont plusieurs images.

Pour les trouver on va pas se casser la tête on va utiliser le champ de recherche qui se trouve dans l'éditeur de HTML

Pour avoir ce petit champ de recherche on va faire CTRL+F (ou CMD+F) et mettre img


Alors je ne vous cache pas que vous allez avoir plein de img, on s’intéresse nous à la partie HTML et si le code est bien commenté vous aurez une mention comme quoi il s'agit de Photo Posts


On va donc y rajouter notre super classe .superfu


Voilà on a fait notre possible pour cette étape

C. Plan C : on aura le dernier mot !

Vous avez suivi le plan B à la lettre mais cela ne fonctionne pas. J'ai expérimenté un template trouvé par Nat et c'est le cas de celui-ci   

Ne baissez pas les bras on aura le dernier mot !
Nous allons faire deux choses : modifier légérement le code poour ajouter à la fin !important
En gros cela indique que cet ordre prend le pas sur n'importe quel autre ordre

Code:

.superfu{
        -webkit-filter: grayscale(100%)!important;
    }
    .superfu:hover{
        -webkit-filter: grayscale(0)!important;
    }

La seconde chose nous allons déplacer notre code css, car visiblement là ou il est placé le thème fait la sourde oreille... On ne touche pas à ce que l'on a ajouté au HTML on en a besoin !

Nous allons donc chercher dans le code la partie ou le créateur a rajouté du css. Et on le rajoute à la fin juste avant {custom_css} qui est la partie ou se rajoute le code CSS que l'on met dans la personnalisation. Oui tout à fait là où on avait mis notre code avant mais il s'en fichait.


En théorie du moins en pratique sur le template casse bonbon trouvé par Nat cela fonctionne.
Si ce n'est pas le cas et bien je n'ai pas de plan D mais votre thème est sacrément tordu donc ouvrez une aide ou changez le

Je t'aime ! Merci pour ce tuto

merci Fu

Merci ! Le résultat est chouette !!

Merci Fu pour le tuto ! (j'aime l'image que tu utilises )