Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

Bruny
*

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

http://guerredesquatreclans.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.
avatar

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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 ?
avatar

Bruny
*

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

http://guerredesquatreclans.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 !
avatar

Neptunia
Membre actif

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

https://www.galaxie-series.net/
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
avatar

Bruny
*

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

http://guerredesquatreclans.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