Hi,
ich will ein Mouseover-Effekt wie z.b. bei Haribo auf der Hauptseite bei den mittleren DIV-Containern erreichen. Bei Mouseover legt sich ein neuer DIV-Container über den alten, der aber nicht weg ist, sondern nur mit Opacity abgeschwächt wird.
Momentan habe ich in der CSS stehen:
Und in der HTML-Datei:
Das funktioniert soweit, aber leider wird auch der überlagernde DIV-Container (mask) in grau dargestellt und durch opacity abgeschwächt.
Es soll aber nur der Container box abgeschwächt werden.
Wo liegt denn nun da der Fehler?
ich will ein Mouseover-Effekt wie z.b. bei Haribo auf der Hauptseite bei den mittleren DIV-Containern erreichen. Bei Mouseover legt sich ein neuer DIV-Container über den alten, der aber nicht weg ist, sondern nur mit Opacity abgeschwächt wird.
Momentan habe ich in der CSS stehen:
Code:
.mask:hover { z-index: 1; opacity:1; } .mask { position: absolute; top:30px; left:30px; font-family:Oswald; font-size:50px; color:#000; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; opacity: 0; z-index: 2; } .box { position: relative; } .box:hover { filter: grayscale(100%); /* Standard */ -webkit-filter: grayscale(100%); /* Webkit */ filter: url(/elements/grayscale.svg#mask); /* Firefox 4-34 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Old WebKit */ opacity:0.5; transition:1s; } .box:hover .mask { opacity: 1; }
HTML-Code:
<div class="box"><a href="salate.php"> <p class="hover"> <img src="img/spargel.jpg" alt="slide2"/></p> <div class="mask">Salate immer frisch und frech!</div></a> </div>
Es soll aber nur der Container box abgeschwächt werden.
Wo liegt denn nun da der Fehler?
Kommentar