Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
782 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Opacité survol, petit coup de pouce html :)

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Opacité survol, petit coup de pouce html :)

n°2304097
flea07
Posté le 02-08-2017 à 14:13:48  profilanswer
 

Bonjour,  
 
 
J'aimerais intégrer cette image sur mon site via ce code HTML :  
<a data-flickr-embed="true" href="https://www.flickr.com/photos/157160288@N06/36174693656/in/dateposted-public/" rel="nofollow noopener noreferrer" target="_blank" title="plaquette png"><img src="https://farm5.staticflickr.com/4322/36174693656_6febf0f96e_o.png" width="588" height="686" alt="plaquette png"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>  
 
Cependant j'aimerais que l'image baisse d'opacité ( à 50%) lors de d'un survol souris, savez-vous quel code intégrer ?  
 
Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?  
 
Merci pour votre expérience :)

mood
Publicité
Posté le 02-08-2017 à 14:13:48  profilanswer
 

n°2304098
Devil'sTig​er
Jee & Cee on the rock !
Posté le 02-08-2017 à 14:18:20  profilanswer
 

Donne une classe a ton tag "a", disons "overlay", ensuite en CSS:
 

Code :
  1. a.overlay:hover img {
  2.     opacity: 0.5;
  3.     filter: alpha(opacity=50); /* For IE8 and earlier */
  4. }


 
Voila.
 
Et pour le poids, non ton site ne devient pas plus léger.


Message édité par Devil'sTiger le 02-08-2017 à 14:19:38

---------------
JunZZi | Jee & Cee
n°2304099
flea07
Posté le 02-08-2017 à 14:29:06  profilanswer
 

Merci pour cette astuce, j'ai peur de ne pas tout comprendre, le code finale donnerait quoi du coup ?  
 
Aurais-tu une méthode pour que les images soient moins lourdes sans détériorer trop leur qualité ? J'ai essayé de les passer de 300 à 72 PPP mais elles pixelisent vraiment trop en baissant ce niveau de qualité

n°2304103
Devil'sTig​er
Jee & Cee on the rock !
Posté le 02-08-2017 à 15:40:59  profilanswer
 

cette regle CSS se traduit par:
 
Lorsque tu tombes sur un tag "a" ayant pour classe "overlay", et que ce tag est survolé par la souris (le :hover), alors toutes images dans ce tag auront les propriétés opacité a 50%.
 
Pour ton site, le mieux habituelement pour gérer ca c'est le PNG.


---------------
JunZZi | Jee & Cee

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Opacité survol, petit coup de pouce html :)

 

Sujets relatifs
Petit coup de pouce en html[VBA/HTML] insérer une image dans un mail
Petite aide sur du code HTML[HTML/CSS]Centrer un texte sur tous les navigateurs
Questions multiples HTML/PHP/SQLProblème de code HTML/CSS + Hébergement chez soi
Formulaire de calcul en HTML/JavaScript 
Plus de sujets relatifs à : Opacité survol, petit coup de pouce html :)



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR