[Résolu] Utilisation de l'Opacity

Bonjour,
sur le hover d'une div, j'ai fait en sorte d'afficher une autre div.
cette dernière a une opacity de 0.5. Dans cette div j'ai 2 images.
le problème est que les images sont soumissent a cette opacité ce qui ne m'arrange pas.
Comment faire pour que les images est leur état normal ?
Merci

voici le code au cas ou :

<div class="result_recherche_fond">
	<div class="result_recherche_div_select">
		<a href=""><img src="/images/v3-template/recherche/bouton-profiter.gif" /></a> 
		<a href=""><img src="/images/v3-template/recherche/bouton-fiche.gif" /></a>
	</div>
Plein de bla bla bla ....
</div>

.result_recherche_div_select {
    background-color: #000000;
    height: 50px;
    line-height: 50px;
    margin: 0 0 0 -16px;
	opacity : 0.5;
	-moz-opacity : 0.5;
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	filter : alpha(opacity=50); /* IE < 8 */ 
    position: absolute;
    text-align: center;
    width: 648px;
	display:none;
}
.result_recherche_fond:hover .result_recherche_div_select {
	display:block;
	z-index:10;
}

Modifié par christobal (11 Apr 2011 - 14:06)

Salut,

Non je ne crois pas que cela soit possible… (tout ce qui est à l'intérieur de #result_recherche_div_select héritera de son opacité). Mais c'est quoi le but de la manœuvre ? Avoir un encadrement transparent aux images ?

non pas du tout.
En fait, j'ai une liste de résultat, et quand je passe sur une ligne, j'ai cette div a moitié transparente qui apparait et qui comporte deux boutons sous forme d'image.
Ces boutons renvoie sur des pages détaillé.
Ça doit bien être possible, car en y pensant les lightbox c'est le même principe.
une div avec de l'opacité et un contenu non soumis a cela.

Bon, je ne sais pas se que ca vaut, ci c'est propre ou pas, mais ca marche et c'est chouette .

CSS :

.result_recherche_div_select {
	background-color: #000000;
	display: none;
	height: 50px;
	line-height: 50px;
	margin: 0 0 0 -16px;
	opacity: 0.5;
	-moz-opacity : 0.5;
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	filter : alpha(opacity=50); /* IE < 8 */ 
	position: absolute;
	text-align: center;
	width: 648px;
	z-index: 10;
}
.result_recherche_fond:hover .result_recherche_div_select , .result_recherche_fond:hover .result_recherche_div_select_img {
	display:block;
}
.result_recherche_div_select_img {
    display: none;
    margin: 0 auto;
    padding: 7px 0 0;
    position: absolute;
    text-align: center;
    width: 648px;
    z-index: 15;
}

HTML :

<div class="result_recherche_fond">
	<div class="result_recherche_div_select_img">
		<a href=""><img src="/images/v3-template/recherche/bouton-profiter.gif" /></a> 
		<a href=""><img src="/images/v3-template/recherche/bouton-fiche.gif" /></a>
	</div>

	<div class="result_recherche_div_select"></div>

Plein de bla bla bla .... 

</div>

Modifié par christobal (11 Apr 2011 - 14:19)

bonjour,

si le fond de ce div n'affiche qu'une couleur, alors se servir de background-color:rgba(0,0,0,0.5); par exemple est une bonne solution.
Garder éventuellement les filtres IE pour les version antérieurs via les CC en doublant la declaration background:

    background-color: #000000; 
    background-color: rgba(0,0,0, 0.5); 

il y a un tuto sur rgba() sur ce site il me semble.

++