Mouseover - Farbe von Bild ändern?

Hey ich möchte in einem HTML Code angeben, dass ein Bild über das die Maus fährt rot eingefärbt wird. Soll also so ein leichter transparenter Schleier werden. Dass ich sowas machen musste ist schon etwas her, daher bin ich etwas überfragt.

Ich hätte das nur mit CSS lösen können, wie ich das in den HTML Code schreibe weiß ich nicht mehr. (a hover)

Das wäre der Code:

Wäre echt nett wenn man mir helfen kann:D

Answer 1

[tavkomann]

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 */
}

Answer 2

[byans]

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

Answer 3

[abbrechen]

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

Comments

[abbrechen]

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.