0 Daumen
90 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 Punkt
 
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  –  ❤ Bedanken per Paypal

Hat geklappt!

Ein anderes Problem?

Stell deine Frage

Ähnliche Fragen

+1 Punkt
1 Antwort
+1 Punkt
1 Antwort
0 Daumen
1 Antwort
Gefragt 12 Mai 2018 von Gast

Willkommen bei der Stacklounge! Stell deine Frage sofort und kostenfrei

x
Made by a lovely community
...