superposition d'images en css
superposition d'images en css - HTML/CSS - Programmation
Marsh Posté le 02-02-2010 à 09:37:51
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
Marsh Posté le 02-02-2010 à 12:38:52
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+
Marsh Posté le 02-02-2010 à 16:56:36
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
Marsh Posté le 02-02-2010 à 17:14:38
Salut,
Tu avais écrit quoi pour tes z-index ?
---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Marsh Posté le 02-02-2010 à 18:54:50
J'ai essayé un truc dans le genre :
Code :
|
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
Marsh Posté le 02-02-2010 à 21:30:12
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 
Marsh Posté le 03-02-2010 à 14:54:16
Merci beaucoup cleanx!! Ça fonctionne nikel sous Firefox et IE8 je vais essayer sous les autre navigateurs récents mais ca devrai le faire!
Marsh Posté le 04-02-2010 à 19:42:42
| 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
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 html
- Superposition de plusieurs images
- Superposition d'images tracé avec Canvas
- [RESOLU] [javascript] superposition d'images
- Superposition de deux images
- [PHP] superposition d images
Marsh Posté le 02-02-2010 à 03:23:11
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?