Auslösebereich für Overlay anpassen?

Question

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?

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

Answer 1

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
});

Comments

Hat geklappt!