0 Daumen
193 Aufrufe

Ich habe ein Bild auf meiner Webseite, das, wenn man es mit dem Cursor anvisiert, ein graues Overlay erscheinen lässt, das mit Text gefüllt werden kann. Leider löst es bereits aus, wenn ich mich in dem blauen Kasten (s. u.) mit dem Cursor befinde - wie kann ich das verhindern?

e8986e9456b3a01c4d6ae4b13e998535 (1).png

.overlay {

position: absolute;
top: 0;
bottom: 0;
left: 35;
right: 0;
height: 100%;
width: 50%;
opacity: 0;
transition: .9s ease;
background-color: #333;
}
von

1 Antwort

+1 Daumen
 
Beste Antwort

Durch das width: 50%; nimmt dein Overlay die Hälfte der "Webseite" ein.

Entweder setzt du max-width:400px für das Overlay (wobei der Pixelwert der Bildbreite entsprechen sollte).

Oder du triggerst den Mouseover nicht mit dem Overlay, sondern mit dem img darunter!

Du hast keinen Javascript-Code gegeben. Mit Jquery wäre das:

$('.overlay img').mouseover( function(){

// do the trigger
});
von

Hat geklappt!

Ein anderes Problem?

Stell deine Frage

Ähnliche Fragen

Willkommen bei der Stacklounge! Stell deine Frage einfach und kostenlos

x
Made by a lovely community