Résolu image : opacité au survol ?

Bonjour, 

Je me demandais si il y avait un code HTML pour changer l'opacité d'une image au survol mais uniquement sur certains articles ?

Bonjour Max,

Pour ce que tu veux faire, il faudra d'abord intervenir dans le css et ensuite au coup par coup dans le html. 

Je vois que tu as déjà adopté cet effet sur un de tes blogs en ayant mis dans ta feuille de style :

.module_contenu img:hover {
  opacity: 0.6;
}

Là, effectivement, cela s'applique à l'ensemble des images.

Pour que cet effet ne s'applique qu'à quelques images, il faut procéder différemment.

Mettre dans la feuille de style, aux lieu et place de ton code ci-dessus, par exemple :

.opacity:hover {
   opacity: 0.6; /*à adapter*/
}

et ensuite dans le html du post, pour la ou ou les images concernées, rajouter ce qui est en rouge (j'ai repris le code d'une de tes images):

<p style="text-align: center;"><a href="http://ekladata.com/ZjPThJ17PvsNwUURl99yfsCgV9A.jpg"><img class="opacity" src="http://ekladata.com/ZjPThJ17PvsNwUURl99yfsCgV9A@500x333.jpg" width="500" height="333" alt=""/></a></p>

Au final cela peut devenir lourd à gérer... 

Bonjour ou bonsoir,

Autre possibilité, sans rien modifier dans les codes html des articles, en utilisant ce type de code css :

#module_contenu_article00000000 img:hover ,
#module_contenu_article111111111 img:hover ,
#module_contenu_article22222222 img:hover {
 opacity: 0.6;
}

En vert ce sont les n° d'identification de chaque article concerné.

Pas de virgule après le img:hover qui précède le {

/!\ Mais toutes les images des articles identifiés seront concernées !

Bonjour stormalo, 

Solution à laquelle j'avais également pensé, mais la liste risquant d'être longue...

Bonne journée. 

@Colette95 

Bonjour,

C'est sûr que la liste peut être longue, mais pour modifier ultérieurement l'effet survol  ce serait plus facile et plus rapide.

Comme souvent, ce qui manque, c'est plus d'infos de la part de la personne qui demande pour décrire son besoin :
Estimations du nombre d'articles concernés, du nombre d'images concernées et non concernées par article etc.

Par exemple, hypothèse d'une dizaine d'images par articles, toutes concernées, nous aurions peut être proposé une troisième possibilité de faire, en plaçant tout le code source dans une <div class="opacity_image_survol">.....</div>   avec le css qui va avec.   

Bonne journée également.

Bonjour, 

Je pense que ces codes iront, merci beaucoup !