Balise Opacité Html Image

[Bruny]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://leforumdesecrivains.forumactif.org/

Description du problème

Bonjour !

Je voudrais mettre la balise opacité pour les images des Partenaires et Top - Sites de la Page d'Accueil pour que quand le curseur passe sur l'image, l'opacité fait effet pour qu'on puisse voir le nom du Top - Sites mais je ne sais pas où placer la balise.

Pouvez - vous m'aider ?

Merci d'avance

Voici le :

Code:

   <div class="pacrimitopparto">
                                                                        
         <div class="pacrimititre2">
                                          Partenaires & Tops Sites                           
         </div>
                                           <a target="_blank" href="#"><img src="http://i86.servimg.com/u/f86/19/34/69/70/partos11.jpg" /></a><a target="_blank" href="http://chezarmonych.eklablog.com/">Création Armony</a>    <a target="_blank" href="#"><img src="http://i86.servimg.com/u/f86/19/34/69/70/partos11.jpg" /></a>  <a target="_blank" href="#"><img src="http://i86.servimg.com/u/f86/19/34/69/70/partos11.jpg" /></a>  <a target="_blank" href="#"><img src="http://i86.servimg.com/u/f86/19/34/69/70/partos11.jpg" /></a>                             
      </div>

[Neptunia]

Bonjour ^^

Vous pouvez par exemple remplacer toutes vos occurrences de <img src par

Code:

<img class="opaque" src

et rajouter dans votre feuille CSS

Code:

.opaque:hover {
opacity: 0.5;
}

La valeur attribuée par défaut à opacity est de 1. Si on met 0, le contenu devient entièrement transparent.

Si vous voulez un changement d'opacité moins brutal vous pouvez utiliser un CSS de ce type

Code:

.opaque:hover {
  opacity:0.5;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}

L'élément passera de son opacité par défaut à 0.5 en une durée de 1 seconde.

[Bruny]

Merci ! Je mets le code à la suite du bloc dans le CSS ?

[Neptunia]

Oui !

[Bruny]

Merci beaucoup ! Je mets le sujet en résolu !