Hallo! Bin auf der Suche nach einem einfachen Mouseover-Effekt wie Abdunkeln oder Einrahmen für verlinkte Bilder. Lässt sich sowas einfach mit etwas Code -auch für responsive Bilder- realisieren?
Abdunkeln wird ein wenig schwer, wenn nur das Bild angesprochen werden soll. Wenn es im HTML um das jeweilige Bild immer ein umschließendes Element gibt, könnte man dies mit einem transparenten Farbwert bei hover belegen, sodass das Bild abgedunkelt wirkt. Einen Rahmen um das Bild ziehen, wenn über dieses gehovert wird ist allerdings schon einfacher. Das kannst du wie folgt erreichen: Code: img:hover { border: 3px solid #000000; //Farbwert auf deine gewünschte Farbe ändern } Mein Beispiel würde das für alle Bilder, die es auf der Seite gibt ermöglichen. Willst du das nur für einen bestimmten Bereich haben, müsste der CSS-Selektor entsprechend angepasst werden.
Danke! Es funktioniert soweit. Habe eben mit verschieden Effekten wie aufhellen, vergrößern, verschieben usw. experimentiert... Das Problem ist, dass es für alle Bilder gilt. Bei den Produktbildern ist jede weitere Veränderung störend und bei nicht verlinkten Bildern sollte auch nichts passieren. Ist der CSS-Selektor einfach anzupassen? Lässt sich sowas im HTML-Editor einzeln bei den Bildern realisieren. Irgendwie so: <img ... hover-style="..." ... ?
Inline wird das nicht gehen, da man dort keine Möglichkeit hat zu erkennen, ob das Bild gehovert wird oder nicht. Sind die Bilder, die den Effekt bekommen sollen alle auf einer bestimmten Seite oder können die überall auftauchen?
Es müsste so sein, dass sich selektiv nur die verlinkten Bilder verändern. Jetzt ist es so, dass sich alle Bilder ändern.
Super, jetzt ist es perfekt! Da wo es gestört hat, bei der Produktdetailseite, hab ich´s einfach zurückgestellt.