Opacity für img bei :hover

[kornyclown]

Folgende Situation:
Ich möchte eine Navigation aus Bildern bauen und mittels hover ein darüber liegendes Bild Sichtbar machen, so dass das darunterliegende Bild noch leicht sichtbar ist.

Die Idee:

<a href="index.html" id="bild1hover"><img src="bla1.jpg" id="bild1"></a>

#bild1hover {width: x; height: y; margin: 0 20%; position: absolute; bg-image: url('blahover.jpg'); opacity: 0.0;}

#bild1 {width: x; height: y; margin: 0 20%; position: absolute;}
#bild1:hover #bild1hover {opacity: 0.8;}

Leider funktioniert das nicht so wirklich. Je nachdem wie ich versuche zu variieren wird halt immer etwas falsch angezeigt. Mal ist ein Bild neben dem anderen, mal sind sie nur halb verschoben, mal wird das hover bild hinter dem "Ursprungsbild" angezeigt und manchmal auch garkeins.
Ich möchte nur sehr ungern auf die traditionelle Variante mit dem gecroppten Bild zurückgreifen da ich, vorrausdenkent auf das responsive design, für nicht hoverfähige Geräte (Touchscreen) andere Versionen dieser Deckkraft anwenden möchte.

Ich habe für "meine" Methode keine entsprechenden Dokumentationen im Netz gefunden. Vielleicht kennt ihr was, was auf meine Situation passt oder könnt mir direkt sagen, ob ich vielleicht nen groben Denkfehler in "meiner" Version hab.

 

[Myhar]

AW: Opacity für img bei :hover

Erstens eine Anmerkung zur semantik: Wieso wird bla1.jpg mittels img-Tag eingebunden und blahover.jpg über das Hintergrundattribut im CSS? Sind beides inhaltich relevante Bilder, so sollen auch beide mittels img-Tag eingebunden werden. Sind beides nur dekorative Bilder, sind auch beide nur mittels CSS einzubinden.
Auch hoffe ich, dass du nicht komplett auf Text in deiner Navigation verzichtest.
Vorausgesetzt, die von dir gepostete Semantik ist korrekt (woran ich aber ehrlich gesagt zweifle), dann solltest du dich noch mit deine CSS beschäftigen:

bg-image: url('blahover.jpg') <-- bg-image gibt es nicht
#bild1:hover #bild1hover  <-- dieser Selektor trifft auf den von dir geposteten HTML Ausschnitt niemals zu, die Eigenschaften hier werden also nie angewandt.

 

[kornyclown]

AW: Opacity für img bei :hover

Erstens eine Anmerkung zur semantik: Wieso wird bla1.jpg mittels img-Tag eingebunden und blahover.jpg über das Hintergrundattribut im CSS?

Normalerweise benutze ich für Hyperlinks nur Text worin ich auch rechgt sicher bin. In diesem Fall müssen es aber Bilder sein und die geläufigste Variante für Bilder als Hyperlink, die ich kenne, ist <a><img src=""></a>.

Sind beides inhaltich relevante Bilder, so sollen auch beide mittels img-Tag eingebunden werden

Was heißt denn inhaltlich relevant? Es sind im Prinzip nur Bilder, die dem Design, Look-and-Feel der Seite dienen und wenn man darüber hovert wird das Bild des darüberliegenden Links zu 80% sichtbar.

Auch hoffe ich, dass du nicht komplett auf Text in deiner Navigation verzichtest.

Ich schicke kurz vorweg, dass diese Seite für ein künstlerisches Projekt ist (nicht kommerziell), weshalb die Kunst in diesem Fall 51 Stimmen hat und die Useability 49 Stimmen.
Die Bilder, die beim hover mit 80% Deckkraft sichtbar werden, sind hauptsächlich einfache Farbflächen mit Text darin. Leider muss ich es in diesem Fall als Bilder einbinden weil mir aktuelle Programmiertechnologie nicht die Designmöglickeiten bietet, die hier im speziellen gefragt sind. Viele, aussergewöhnliche Sonderzeichen, einzelne Buchstaben in einem Wort werden gedreht, etc...sone Scherze halt.

Vorausgesetzt, die von dir gepostete Semantik ist korrekt (woran ich aber ehrlich gesagt zweifle), dann solltest du dich noch mit deine CSS beschäftigen:

bg-image: url('blahover.jpg') <-- bg-image gibt es nicht
#bild1:hover #bild1hover  <-- dieser Selektor trifft auf den von dir  geposteten HTML Ausschnitt niemals zu, die Eigenschaften hier werden  also nie angewandt.

Also dass das "bg-image" falsch ist weiß ich
Der gesamte Codeblock sollte auch nicht in erster Linie semantisch korrekt sein sondern vermitteln was meine Idee war.
Um es nochmal in menschlichen Worten zu sagen:
Der User besucht die Seite, dort befinden sich Bilder, welche die Navigation darstellen. Über all diesen Bildern liegen, für den User nicht sichtbar, die Hyperlinkelemente (ebenfalls Bilder) mit 0.0 opacity. Hovert der User jetzt über eines dieser Bilder, erscheind nun das Hyperlinkbild mit 0.8 opacity über dem "Ursprungsbild". Er kann darauf klicken und wird zum entsprechenden Hyperlink geführt.

 

[Myhar]

AW: Opacity für img bei :hover

Hyperlinks um Bilder sind so nicht falsch und sollen auch so verwendet werden. Nur wenn es sich um eine Navigation handelt, dann handelt es sich meistens um Wörter... Und die sollte man zumindest in den alt-Tag der Bilder packen. Besser wäre eine passende css image replacement Technik.
Wollte ich nur zu Beginn loswerden, da so etwas doch nie in ein fertiges Projekt eingebaut wird.

Inhaltlich relevant heißt, dass es kein schmückendes Beiwerk (wie eine HG-Grafik) ist.

Ich schicke kurz vorweg, dass diese Seite für ein künstlerisches Projekt ist (nicht kommerziell), weshalb die Kunst in diesem Fall 51 Stimmen hat und die Useability 49 Stimmen.

Die von mir vorgeschlagenen Hinweise haben aber etwas mit Accessability zu tun Auch wenn mir klar ist, dass du dir den Aufwand sicher nicht machen wirst, darauf hinweisen wollte ich allemal.

Der gesamte Codeblock sollte auch nicht in erster Linie semantisch korrekt sein sondern vermitteln was meine Idee war.

Dann kannst du sicher genauer ausführen, was dein Problem war/ist? Ich habe keine Lust, aufgrund einer Beschreibung ein funktionierendes Beispiel zu basteln. Entweder du postest ein konkretes Problem (inklusive Link zu dem Beispiel) oder du postest zumindest Bilder, wie das ganze aussehen soll. Mehr, als deinen geposteten Code zu korrigieren kann ich leider nicht

 

[FlashZange]

AW: Opacity für img bei :hover

Dann mach ichs halt
Hat auch nur zwei Minuten gedauert

<html>
<head>

<style type="text/css">
.links_navi {width: y; height: x; margin: 0 20%; position: absolute;}
#bild_std, #bild_hov {position: absolute;}
#bild_hov {opacity: 0;}
#bild_hov:hover {opacity: 0.8}
</style>

</head>

<body>

<a href="index.html" class="links_navi"><img src="std.jpg" width="x" height="y" id="bild_std"><img src="hover.jpg" width="x" height="y" id="bild_hov"></a>

</body>
</html>

Is nicht besonders schön, ich weiß, aber funktioniert glaub ich (nicht getestet)

Beste Grüße

//EDIT
Klar, die alt-Attribute sollten noch in die img-tags

 

[cebito]

AW: Opacity für img bei :hover

Soll ja eine Navi sein, dann legen wir die auch dementsprechend an. Und die "Dekorations"-Bilder selbstverständlich als Hintergrund.

http://jsfiddle.net/m67pL/

 

[kornyclown]

AW: Opacity für img bei :hover

Dann mach ichs halt
Hat auch nur zwei Minuten gedauert

Is nicht besonders schön, ich weiß, aber funktioniert glaub ich (nicht getestet)

Beste Grüße

//EDIT
Klar, die alt-Attribute sollten noch in die img-tags

Funktioniert super, danke.
Was heißt denn nicht besonders schön? Also für mich funktioniert es genau so wie es soll.

 

[FlashZange]

AW: Opacity für img bei :hover

Was heißt denn nicht besonders schön? Also für mich funktioniert es genau so wie es soll.

Die id's z.B. bereiten mir schon Kopfschmerzen und eine Navi sollte immer als ul angelegt werden, damits auch ohne css sauber strukturiert ist.

Die Version von cebito ist wesentlich "sauberer". Und leichter anpass- und änderbar. Aber für "es soll funktionieren" tuts meine Version natürlich auch

Beste Grüße