superposition d'images en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : superposition d'images en css

bobby76

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?

Publicité

rufo

Pas me confondre avec Lycos!

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

cleanx

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+

bobby76

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

toum_toum

Vivons masqués

Salut,

Tu avais écrit quoi pour tes z-index ?

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

bobby76

J'ai essayé un truc dans le genre :

Code :

..............
<style type="text/css" media="screen">
#content {
height:1000px;
margin:21px;
background: url(images/bg.jpg) no-repeat top;
padding: 200px 0 0 200px;
}
img{
z-index:1
}
#scrollslid img{
margin:2px;
float:left;
height:67px;
width:67px;
border: 1px solid #fafafa;
z-index: 10;
background:url(images/f70.png);
}
#scrollslid a:hover img {
z-index: 99;
height:67px;
width:67px;
border-color: red;
background:none;
}
</style>
</head>
<body>
<div id="content">
test vignettes
<div id="scrollslid">
<div id="scrollslidcont">
<a class="zoom" rel="group" title="Le Havre, escaliers" href="vrac/lh04.jpg"><img src="vrac/mauvaislien" alt="Le Havre, escaliers" /></a>
<a class="zoom" rel="group" title="Orchidée macro" href="vrac/fl01.jpg"><img src="vrac/mauvaislien" alt="Orchidée macro" /></a>
<a class="zoom" rel="group" title="Le Havre, zone industrielle" href="vrac/lhzi1.jpg"><img src="vrac/lhzi1t.jpg" alt="" /></a>
<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>
........................

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

cleanx

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

bobby76

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

Message cité 1 fois

cleanx

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

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 html	Superposition 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

Page générée en 0.066 secondes