Mouseover - Farbe von Bild ändern?

...komplette Frage anzeigen

3 Antworten

Das kann man auch nur mit HTML & CSS lösen ;) Alleine mit HTML eher nicht möglich.

Das wäre der Code:

Code bitte zukünftig bei Hastebin posten.

HTML:

<div class="red">
   <img src="img.png">
</div>

CSS:

.red {
   background-color:red;
   display: inline-block;
}
.red img { opacity:1; transition: opacity 500ms; /* transition (weicher Übergang) musst du ebenfalls einstellen */ }
.red img:hover { opacity:0.5; /* Transparenz musst du noch auf einen Wert zwischen 0 und 1 einstellen */ }

1. erstelle deinem Element ein Pseudoelement (before oder after)

2. dem Pseudoelement opacity: 0; geben

3. deinem Element einen hover verpassen

4. im hover das Pseudoelement einbringen und opacity: 1 schreiben

Wenn du deinem Pseudo außerhalb und innerhalb des Hovers noch eine transition-duration: 0.4s; gibst, bekommst du auch einen schicken Übergang zwischen den opacity-Einstellungen.

0

Was möchtest Du wissen?