Highlight Image onMouseover

[Maracuja]

Hallo,

ich suche eine gute Lösung, damit Bilder bzw. Icons, nachdem man mit der Maus drübergefahren ist, dunkler werden (können auch gerne erleuchten).

Folgendermaßen klappt es schon recht gut (zumindestens in Firefox und im IE):

.light img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.light:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}

Gibt es eine bessere, aktuelle Lösung, die mit allen Browsern kompatibel ist?

Vielen Dank für eine Antwort.
Maracuja

 

[threadi]

In welchem Browser funktioniert deine Lösung denn nicht?

 

[devilseye]

Opera braucht meines wissens noch das -o- vorne dran chrome sollte das ohne
browser spezifische angaben können genauso wie safari und ie ab version 9 wenn
ich richtig im bilde bin.

 

[Skater]

So, der erste Beitrag war totaler Crap.

Versuchs mal so:

HTML:

<div>
<div></div>
</div>

CSS:

div {	position: relative;
	background: url(Bildadresse);
	height: Höhe des Bildes;
	width: Breite des Bildes; }

div div {	position: absolute;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, .8); }
		
div div:hover {	background: transparent; }

 

[threadi]

Der Browsersupport für rgba() ist aber noch schlechter als für opacity.
RGBA colors - CSS3 . Info

 

[Skater]

Dann halt mit Bildern:

HTML:

<div id="bild1"></div>

CSS:

#bild1 {	position: relative;
		background: red;
		height: 300px;
		width: 300px;
		background: url(http://www.symmsblog.de/wp-content/uploads/2012/01/BILD.jpg); }
	
#bild1:before {	content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		background: url(http://crunk.bplaced.net/white70percent.png); }

#bild1:hover:before {	visibility: hidden; }

Ich mein .. Internet Explorer 10 kommt ja eh bald und der wird das ganz sicher können.
Ansonsten einfach diesen Filter hinzufügen, dass IExplorer transparente Bilder anzeigen kann.