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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  superposition d'images en css

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

superposition d'images en css

n°1962163
bobby76
Posté le 02-02-2010 à 03:23:11  profilanswer
 

Bonjour,  
 
J'ai des petites vignettes sur lesquelles j'aimerai ajouter une image transparente (noir à 50%) quand la souris ne survole pas l'image. Est-ce possible uniquement en css sans toucher au html?

mood
Publicité
Posté le 02-02-2010 à 03:23:11  profilanswer
 

n°1962191
rufo
Pas me confondre avec Lycos!
Posté le 02-02-2010 à 09:37:51  profilanswer
 

en utilisant en css le z-index.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°1962248
cleanx
Posté le 02-02-2010 à 12:38:52  profilanswer
 

Hello,
 
pour l'opacité : http://css4design.com/opacite-avec [...] ransparent
 
Pour l'effet "rollover" : http://css.mammouthland.net/rollov [...] -hover.php
 
Tu devrais pouvoir t'en sortir avec ça.  
 
Comme l'a dit rufo, il faudra probablement que tu joues avec la propriété "z-index" pour la superposition des images.
 
A+

n°1962387
bobby76
Posté le 02-02-2010 à 16:56:36  profilanswer
 

Merci pour vos réponses. J'ai vraiment du mal a trouver la solution!
 
j'ai mi un petit exemple en ligne : http://www.alexis-coquerel.com/test.html
Quand le lien de la vignette est erroné, j'ai bien l'image png transparente qui occupe la place de tous les cadres quand la souris n'est pas dessus. Mais lorsque le lien de la vignette est OK, le png ne se superpose pas. J'ai essayé avec les z-index mais ca n'a pas l'air de changer grand chose (ou peut être que je les utilise mal!) et aussi les propriétés d'opacité mais la vignette se mélange avec l'arrière plan de la page.
 
 
 


---------------
Photos Le Havre Urbex Architecture Nature
n°1962401
toum_toum
Vivons masqués
Posté le 02-02-2010 à 17:14:38  profilanswer
 

Salut,
 
Tu avais écrit quoi pour tes z-index ?

n°1962419
bobby76
Posté le 02-02-2010 à 18:54:50  profilanswer
 

J'ai essayé un truc dans le genre :
 

Code :
  1. ..............
  2. <style type="text/css" media="screen">
  3. #content {
  4. height:1000px;
  5. margin:21px;
  6. background: url(images/bg.jpg) no-repeat top;
  7. padding: 200px 0 0 200px;
  8. }
  9. img{
  10. z-index:1
  11. }
  12. #scrollslid img{
  13. margin:2px;
  14. float:left;
  15. height:67px;
  16. width:67px;
  17. border: 1px solid #fafafa;
  18. z-index: 10;
  19. background:url(images/f70.png);
  20. }
  21. #scrollslid a:hover img {
  22. z-index: 99;
  23. height:67px;
  24. width:67px;
  25. border-color: red;
  26. background:none;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="content">
  32. test vignettes
  33.     <div id="scrollslid">
  34.  <div id="scrollslidcont">
  35. <a class="zoom" rel="group" title="Le Havre, escaliers" href="vrac/lh04.jpg"><img src="vrac/mauvaislien" alt="Le Havre, escaliers" /></a>
  36. <a class="zoom" rel="group" title="Orchidée macro" href="vrac/fl01.jpg"><img src="vrac/mauvaislien" alt="Orchidée macro" /></a>
  37. <a class="zoom" rel="group" title="Le Havre, zone industrielle" href="vrac/lhzi1.jpg"><img src="vrac/lhzi1t.jpg" alt="" /></a>
  38. <a class="zoom" rel="group" title="anciens escaliers roulants" href="vrac/Le Havre en marche.jpg"><img src="vrac/Le Havre en marche t.jpg" alt= /></a>
  39. ........................


 
Mais les propriétés de #scrollslid img doivent surement s'appliquer pour la vignette et pour l'image de fond. J'vais essayer de faire ca en javascript au pire.


---------------
Photos Le Havre Urbex Architecture Nature
n°1962449
cleanx
Posté le 02-02-2010 à 21:30:12  profilanswer
 

Hmmmm, si j'ai bien compris ce que tu voulais, à mon avis , le problème c'est que lorsque le "hover" est appliqué, l'image passe de toute façon "au-dessus" du background, le z-index ne sert à rien dans ce cas.
 
Comme ça ça marche : guruCSS  
 
Je viens de trouver la technique comme ça, donc à tester un peu sur les différents navigateurs. Ch'uis pas sûr que ce soit très W3C compliant, mais bon le CSS c'est presque de l'art ;)
 
 

n°1962636
bobby76
Posté le 03-02-2010 à 14:54:16  profilanswer
 

Merci beaucoup cleanx!! Ça fonctionne nikel sous Firefox et IE8 je vais essayer sous les autre navigateurs récents mais ca devrai le faire!

n°1963064
cleanx
Posté le 04-02-2010 à 19:42:42  profilanswer
 

bobby76 a écrit :

Merci beaucoup cleanx!! Ça fonctionne nikel sous Firefox et IE8 je vais essayer sous les autre navigateurs récents mais ca devrai le faire!


 
No problemo ;) c'est fait pour ça les forums. Si jamais, je peux te donner les références d'un e-book super bien fait pour passer le CSS en revue, par contre il faut parler anglais. MP-moi si jamais ça t'intéresse.
 
A+


Message édité par cleanx le 04-02-2010 à 19:43:08

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

  superposition d'images en css

 

Sujets relatifs
5 images une en dessous de l'autre, texte en //Problème de superposition
[css][résolu] bloquer la superposition d'images[PHP/GD] Superposition de plusieurs images avec tranparence...
Superposition images htmlSuperposition de plusieurs images
Superposition d'images tracé avec Canvas[RESOLU] [javascript] superposition d'images
Superposition de deux images[PHP] superposition d images
Plus de sujets relatifs à : superposition d'images en css


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR