✔ Bildlink hover Zustand

[serializable]

Moin,

ich habe einen Link in einer Klasse, bei dem sich im "hover" Zustand eine transparente Fläche über ein verlinktes Bild legen soll.

Nun weiss ich nicht genau wie das geht, ohne Javascript einzusetzen. Kann ich soetwas nur mit css umsetzen.

Noch einmal : verlinktes Bild -- Im Overzustand eine transparente Fläche über dem Bild.


Geht das mit css ?


Danke

 

[soyo]

Ich bin nur etwas neugierig, wozu die transparente Fläche? Sieht doch kein Mensch :suspekt:

 

[serializable]

Transparenz kann ich doch aber einstellen. 30% weiss oder Ähnlich. Dann sieht man noch das Bild, welches dann eben heller erscheint. So ist die Planung.

Geht das mit CSS ?

Oder nehme ich mir dazu ein einfach ein PNG, welches beim Rollover eingeblendet wird.
Dieses dann mit Hilfe von Javascript ein- und ausblenden.

 

[soyo]

Das wird wohl nur mit einem PNG funktionieren, aber warum so umständlich. Wieso erstellst du nicht einfach 2 Bilder, ein normales und ein dementsprechend "aufgehelltes" Bild?

E: habe das falsch verstanden, du willst sicherlich eine Galerie verlinken oder ähnliches und nicht ständig ein neues Bild erstellen. Ich versuch mich mal eben an eine CSS-Lösung mit PNG. Hab eh gerade Zeit und Lust

 

[Maik]

Hi,

mal schauen, ob ich dein Anliegen soweit richtig verstanden habe.

Das Markup:

<a href="#" class="opacity"><img src="pfad/zur/grafik.jpg" alt=""></a>

Das Stylesheet:

a.opacity {
display:block; /* Block-Level-Charakteristika für Breiten-/Höhenangabe */
width:70px; /* entspricht der Grafikbreite */
height:70px; /* entspricht der Grafikhöhe */
}
a.opacity:hover {
opacity:0.3; /* FF, Mozilla, Netscape, Opera 9+, Safari, usw. */
-moz-opacity:0.3; /* ältere Gecko-Browser */
filter:alpha(opacity=30); /* IE */
}
a.opacity img {
border:none;
}

Mit einem semitransparenten Hintergrundbild lässt sich da nicht viel machen, da es von dem eingebundenen Grafikelement überdeckt wird - dies wäre dann nur bei einem reinen Text-Link möglich.

mfg Maik

 

[serializable]

Hallo zusammen,

ich danke Euch beiden für die Hilfe.

@Maik : Richitg gut. Genauso hab ich mir das vorgestellt. Da habe ich glatt richtig was dazu gelernt...

Tausend Dank