Balise Opacité Html Image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Balise Opacité Html Image

Message par Bruny le Jeu 26 Mai 2016 - 21:02

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 Smile

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>


Dernière édition par Bruny le Sam 28 Mai 2016 - 15:21, édité 1 fois

Bruny
Nouveau membre

Féminin
Messages : 28
Inscrit(e) le : 16/01/2016

http://leforumdesecrivains.forumactif.org/
Bruny a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Balise Opacité Html Image

Message par Neptunia le Jeu 26 Mai 2016 - 22:27

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.

Neptunia
+ Hyperactif +

Féminin
Messages : 10398
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise Opacité Html Image

Message par Bruny le Jeu 26 Mai 2016 - 22:38

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

Bruny
Nouveau membre

Féminin
Messages : 28
Inscrit(e) le : 16/01/2016

http://leforumdesecrivains.forumactif.org/
Bruny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise Opacité Html Image

Message par Neptunia le Jeu 26 Mai 2016 - 22:47

Oui !

Neptunia
+ Hyperactif +

Féminin
Messages : 10398
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise Opacité Html Image

Message par Bruny le Sam 28 Mai 2016 - 15:17

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

Bruny
Nouveau membre

Féminin
Messages : 28
Inscrit(e) le : 16/01/2016

http://leforumdesecrivains.forumactif.org/
Bruny a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum