Div-Hintergrund durchscheinen lassen mit opacity

[swisshans]

Hallo

Ich schaff es einfach nicht :-( ...und bitte daher um Hilfe (gegoogelt habe ich).

Ich möchte ein Bild beim hover heller werden lassen - und zwar nicht, dass das Bild vorher abgedunkelt wird und bei hover dann normal erscheint. Zu sagen ist noch, dass der Seitenhintergrund schwarz ist.

Dazu setzte ich das Bild in ein div mit einem weissen Hintergrundbild. Bei hover dann opacity:09. Es funktioniert einfach nicht, es scheint anstelle des div-Hintergrundes der body-Hintergrund durch.

Was kann ich tun, damit ich den gewünschten Effekt erziele?

[quincunx]

Hallo

opacity: 0.9 wäre eine Möglichkeit

grüße

[swisshans]

Hallo

opacity: 0.9 wäre eine Möglichkeit

grüße

Sorry - habe ich mein Problem nicht klar beschrieben? Mein Problem ist, dass bei opacity nicht der gewünschte Bild-div-Hintergrund durchscheint, sondern der body-Hintergrund.

[Der Martin]

Hi,

Sorry - habe ich mein Problem nicht klar beschrieben?

mag sein, ich hatte es nämlich auch nicht wirklich verstanden.

Mein Problem ist, dass bei opacity nicht der gewünschte Bild-div-Hintergrund durchscheint, sondern der body-Hintergrund.

Das ist klar: Es wird dasjenige Element durchscheinend, das einen opacity-Wert <1 hat. In deinem Fall also das div-Element. Du musst dir die Schichten klarmachen, wie einen Papierstapel:

Da liegt obenauf ein Foto.
Drunter ein weißes Blatt Papier (das div-Element).
Und ganz unten die Tischplatte (dein body-Element).

Wenn jetzt das Papier nass und durchscheinend wird, was siehst du dann an der Stelle durchschimmern? Genau, die Tischplatte. Du willst aber in Wirklichkeit das Foto teiltransparent machen, so dass man das helle Papier durchscheinen sieht. Wende also opacity nicht auf den div-Container an, sondern auf das Bild.

Ich hoffe, ich habe deine Absicht jetzt richtig verstanden.

Ciao,
 Martin

[swisshans]

...
Da liegt obenauf ein Foto.
Drunter ein weißes Blatt Papier (das div-Element).
Und ganz unten die Tischplatte (dein body-Element).

Wenn jetzt das Papier nass und durchscheinend wird, was siehst du dann an der Stelle durchschimmern? Genau, die Tischplatte. Du willst aber in Wirklichkeit das Foto teiltransparent machen, so dass man das helle Papier durchscheinen sieht. Wende also opacity nicht auf den div-Container an, sondern auf das Bild.

Ich hoffe, ich habe deine Absicht jetzt richtig verstanden.

Ciao,
Martin

Hallo Martin - danke für die Ausführungen.
Ich meine es ganz genau so, wie Du es beschreibst - offenbar habe ich mich wirklich komplett unklar ausgedrückt - nochmals sorry.

Ich gebe dem Bild opacity - aber es scheint dann nicht das Weiss des div-Elements durch, sondern das Schwarz des body-Elements.

  
body { background-color:#000; }  
div#thumbnails { width: 800px; }  
div.item { opacity: 1; background-image:url(weiss.gif);}  
div.item:hover { opacity: 0.8; }  

  
<div id="thumbnails">  
    <div class="item"><img src="Bild1.jpg" /></div>  
</div>  

[swisshans]

Problem gelöst :-)

So lange probiert... und im Forum geschrieben...

Habe mich hingelegt, weil ich keine Lust mehr hatte - und siehe da: Plötzlich fiel mir ein, dass ich ja tatsächlich opacity dem div gegeben habe, statt dem img.

[Steel]

Da setzt man grad zu ner Noelorgie an und dann hat der Fragesteller es doch noch bemerkt.

[Martin Rettberg]

Hi!

div.item { opacity: 1; background-image:url(weiss.gif);}

Ist das Weiß so besonders, dass es einen eigenen HTTP-Request braucht?

\0