Hover für Bilder: ohne zusätzliche Bilder möglich?

[Martinus33]

Hallo,
wenn man für verlinkte Bilder einen hover-Effekt wünscht, also z.B. eine andere Farbe, heller, dunkler, halbtransparent ect., geht das NUR über ein anderes Bild, das dann eingeblendet wird und entsprechend aussieht?

 

[Kausalat]

Dies galt vor gut 10 Jahren.

Heute sind die meisten dieser Effekte über CSS 3 und damit ohne zusätzliche Grafiken realisierbar. Hier findest du einige Beispiele.

 

[Martinus33]

Guter Link, danke.

Dass wahrscheinlich kein weiteres Bild nötig ist, wenn beim hover das vorhandene Bild selbst nicht verändert werden muss (zoom, caption einblenden ect.), dachte ich mir fast.

Aber wenn beim mouseover das vorhandene eine Bild heller/dunkler/leuchtend/farblos ect. erscheinen soll... da denkt man an Bildbearbeitung und nicht unbedingt an CSS-Möglichkeiten.

Im Moment klappt es noch nicht mit:

.bildlink a img:hover {opacity: 0.5;}

 

[Kausalat]

Könntest du den kompletten entsprechenden HTML- und CSS-Quelltext veröffentlichen?

In meinem Versuch klappt es, sodass ein Vererbungskonflikt in deiner CSS-Datei denkbar ist.

 

[WhiteShark]

Heller ist dunkler geht Problemlos mit opacity. Einfach ein div um das Bild machen was entweder weißen oder schwarzen Hintergrund hat.

 

[Martinus33]

Es sind keine Einzelbilder als "imgs", sondern ein sprite. Im HTML-Code steht:

<span class="drei-bildlinks"><a href="url" class="bildlink1"></a><a href="url" class="bildlink2"></a><a href="url" class="bildlink3"></a></span>

Im CSS-Code:

Die < a > haben über ihre klassen opacity: 1; bekommen:

.bildlink1 {
...(background-position ect.)...
opacity: 1;
}

dito bildlink2 und 3.


Und dann sollte per hover der Effekt eintreten und ich habe versch. Selektoren ausprobiert, aber bislang klappt es nicht:

.bildlink1 a:hover, .bildlink2 a:hover, .bildlink3 a:hover {
opacity: 0.4;
}

.bildlink1:hover, .bildlink2:hover, .bildlink3:hover {
opacity: 0.4;
}

.bildlink1 a img:hover, .bildlink2 a img:hover, .bildlink3 a img:hover {
opacity: 0.4;
}

.bildlink1 img a:hover, .bildlink2 img a:hover, .bildlink3 img a:hover {
opacity: 0.4;
}

 

[Kausalat]

Nur der Selekor .bildlinkx:hover spricht in deinem semantisch recht fragwürdig anmutenden HTML-Konstrukt mit dem Cursor überfahrene Links an. Dies klappt auch im Rahmen meines Versuchs (dein Konstrukt übernehmend).

An welcher Stelle soll dein Vorhaben auf deiner Website eingesetzt werden? Mit Sicherheit finden sich bessere Möglichkeiten, dies zu verwirklichen.

 

[Martinus33]

.bildlinkx:hover war mein erster Versuch und hat wohl aus einem anderen Grund zunächst nicht geklappt. Jetzt klappt es.

Du sagst, das Ganze sei ein fragwürdiges HTML-Konstrukt, das man besser umsetzen könnte.

Ob Navigationen oder social Buttons (in diesem Fall bei mir), stehen nicht immer bei Verwendung eines sprites im HTML-Code die < a >-Tags mit einer Klasse, über die per CSS dann festgelegt wird,
-was aus dem sprite (background-position...)
-wo (Eltern-Element, absolute/relative Positionierung ect. bei mir)
-wie
im Frontend angezeigt wird?

Der IE8 braucht eine extra Filterangabe. Dessen korrekte Angabe in CSS ist aber immer gleich, unabhängig davon, wie man zu welchem Zweck verlinkte Buttons einsetzt bzw. umsetzt?

 

[Daaron]

Aber wenn beim mouseover das vorhandene eine Bild heller/dunkler/leuchtend/farblos ect. erscheinen soll... da denkt man an Bildbearbeitung und nicht unbedingt an CSS-Möglichkeiten.

Heller/Dunkler ist mit Opacity und einem weißen/schwarzen Untergrund (z.B. per :before) oder Overlay (:after) problemlos möglich. Achtung: img:before / img:after funktioniert nicht. Probier es nicht erst, <img> ist ein in sich geschlossenes Element, dass kein before/after enthalten kann. Dasselbe müsste auch für <video> und <audio> gelten.
Opacity auf Sprites (also background-images) ist auch nicht schwerer, tatsächlich ist es sogar leichter. Da du jetzt kein <img> hast, steht nichts der Verwendung von :after entgegen. Leg also einfach, wenn du etwas verdunkeln willst, mit :after eine halbtransparente schwarze Fläche über dein zu verdunkelndes Element.
Natürlich würde diese Technik Probleme machen, wenn du z.B. ein Element mit weißer Schrift auf farbigem Grund hast, und du nur den farbigen Grund verdunkeln willst.... aber auch da weiß CSS Rat. Wozu gibts denn Multiple Backgrounds? In einem Working Draft für Multiple Backgrounds sind sogar Ebenenmodi vorgesehen, wie man sie aus PS und GIMP kennt (Overlay, Addieren, Multiplizieren,...). Das wird RICHTIG VERDAMMT ENDGEIL!

Für komplexere Operationen, wie z.B. Entsättigen oder HSL-Rotation, gibt es ebenfalls eine reine CSS-Lösung: https://developer.mozilla.org/de/docs/Web/CSS/filter
Leider ist diese Option nur eine Schein-Option. Selbst die aktuelle IE12 Tech Preview kanns nicht, und der FF wird es erst mit v35 voll beherrschen. Für Kunden mit Webkit/Blink - Browsern kann man hingegen ein derbes Effekt-Feuerwerk abziehen.

P.S.: Ansonsten gibt es immer noch Canvas...

 

[Martinus33]

Ja, dem Kreativ- oder auch Spieltrieb sind da wenig Grenzen gesetzt. CSS scheint völlig zu Recht nicht nur bei dir sehr beliebt zu sein und hat den ursprünglich praktischen Vorteilen immer weitere Vorzüge hinzugefügt.

Da ist es dann schon fast ein "Glück", dass ich etwas brauche, das nicht nur (fast) alle Browser unterstützen und keine zusätzlichen Bilder (hover-state) braucht, sondern einen Effekt, der weitgehend farbunabhängig (Hintergrund, Schrift) kleine Bilder "hervorhebt", so wie man das als Besucher wohl bei (Bild-)Links typischerweise erwartet und Sinn macht.

Nachdem ich alle Effekte auf der von Krautsalat verlinkten Seite angeschaut habe, bleibt neben opacity vor allem box-shadow übrig. Ein helles, dezentes Gelb erfüllt alle Voraussetzungen, dank dem "blur" sieht es gut aus und lässt sich mit zusätzlichen Minuswerten sogar auf alle vier Seiten anwenden.

Im Moment sieht es so aus:
.bildlink:hover {
box-shadow: 3px 3px 2px #fdfda5 inset,
-3px -3px 2px #fdfda5 inset;
}

Gibt es für den IE8 (ca. 5% meiner Besucher) eine zusätzliche Filterangabe, die zuverlässig funktioniert und keine gelegentlichen Nebenwirkungen hat, die ich ständig im Hinterkopf behalten muss? Es scheinen da unterschiedliche Lösungen zu kursieren (Google).

 

[Daaron]

http://css3pie.com/
Vieles kannst du einfach darüber lösen. Bind das Ding, zusammen mit HTML5Shiv, per Conditional Comment ein.

 

[WhiteShark]

Man kann für IE8-User auch auf die Effekte verzichten. Ist sogar oft sinnvoller. Denn meist sind das sowieso alte WinXP-Rechner mit entsprechend wenig Leistung. Gerade aufwendige Animationen sind da ungünstig.

Aber mit filtern muss man aufpassen. Denn es gibt leider noch den IE9. Setzt man da Opacity über filter und per CSS3, so wird beides interpretiert.

 

[Martinus33]

Opacity ist Plan B. Box-shadow ist schöner und flexibler.

Was die Performance angeht, könnte ich es mal ausprobieren, denn mein Laptop hat noch XP drauf.

Was könnte Krautsalat mit "einfacher" gemeint haben? Der CSS-Code lässt sich wahrscheinlich kürzen, aber weniger bzw. einfacher als drei Links im HTML-Code...

 

[Kausalat]

Kausalat. Ohne "R".

Von "einfacher" habe ich in diesem Thread nichts geschrieben, wohl aber von Semantik. Ein paar Links ohne Linkbeschriftung, eingebettet in irgendeinen Container, sind weder suchmaschinenfreundlich, noch hilfreich für all diejenigen Surfer, die sehbehindert sind und auf eine Sprachausgabe angewiesen sind.

Wenn man sich schon mit der Websiteerstellung befasst, sollte man meines Erachtens derartige Quick-and-dirty-Lösungen lassen. HTML 5 bietet eine Reihe von passenden Elementen, etwa für Navigationsmenüs. Social-Media-Buttons könnten wiederum als eine <ul>-Liste aufgebaut werden.

 

[Martinus33]

Kausalat. Ohne "R".

Von "einfacher" habe ich in diesem Thread nichts geschrieben, wohl aber von Semantik. Ein paar Links ohne Linkbeschriftung, eingebettet in irgendeinen Container, sind weder suchmaschinenfreundlich, noch hilfreich für all diejenigen Surfer, die sehbehindert sind und auf eine Sprachausgabe angewiesen sind.

Wenn man sich schon mit der Websiteerstellung befasst, sollte man meines Erachtens derartige Quick-and-dirty-Lösungen lassen. HTML 5 bietet eine Reihe von passenden Elementen, etwa für Navigationsmenüs. Social-Media-Buttons könnten wiederum als eine <ul>-Liste aufgebaut werden.

Sorry wegen des Namens , wofür steht "Kausalat"?

"Quick-and-dirty" ist lustig, weil ich mich mit jedem Detail viel zu lange aufhalte, um alles so gut wie möglich zu machen - angepasst an meine Besucher und meine Möglichkeiten. Trotzdem danke für die Anregungen.

Die Link-Tags oben habe ich "abgekürzt", weil es für die Frage nicht wichtig war und sich nicht jeder hier im Forum durch langen Code durchquälen sollte. Nur der fehlende anchor ist "Absicht" so und bleibt wie oben.

Die Sumas können es lesen, fürs Ranking sind die drei verlinkten Grafiken unwichtig. Leere Links sind valide und die meisten Screenreader lesen dann das title attribute aus. Am a:focus bin ich gerade dran.
Ohne span ect. drumherum würde ich das hierarchisch hohe "Blockelement" des Themes für CSS-Stylings nehmen "müssen" (z.B. für position:relative), was ich dann immer wieder bei anderen Layouts beachten müsste.

Was wäre an einer ul-Liste besser oder semantisch korrekter? "Uls"ommen ziemlich oft vor bei mir, im Text und als Navigation.

Bis auf "active" kommen alle states vor und da spielt dann die Reihenfolge im CSS-Code eine Rolle. Allerdings werden hover und link vom/im Theme erledigt, d.h., nicht in der für mich vorgesehenen, manuell erstellbaren CSS-Datei, wo ich nun a:focus festlegen möchte. Wie kann man eine Reihenfolge einhalten, wenn sich das nicht alles an einer Stelle erledigen lässt?

 

[Daaron]

Was wäre an einer ul-Liste besser oder semantisch korrekter? "Uls"ommen ziemlich oft vor bei mir, im Text und als Navigation.

Du hast eine Serie thematisch zusammen gehöriger Navigationspunkte, deren Reihenfolge aber mehr oder weniger beliebig ist. Man könnte also sagen, du hast eine unsortierte Liste... <ul> = unordered list
Dem gegenüber würde z.B. eine Artikelnavigation (Inhaltsverzeichnis) stehen. Hier wäre die Reihenfolge relevant, soll sie doch mit dem Erscheinen im Artikel korrelieren. Also eine ordered list <ol>

Wie kann man eine Reihenfolge einhalten, wenn sich das nicht alles an einer Stelle erledigen lässt?

Selektoren-Gewichtung, Vererbung,... Schlicht und ergreifend sollte auch etwas wie a:active:hover{} funktionieren.