Bild-Overlay „margin-top“ nicht richtig mit unterschiedlichen Bildhöhen

Question

das Problem ist, am besten sichtbar in der Geige JsFiddle

Das Bild-Overlay margin-top gesetzt: -100%; aber es funktioniert nicht für Gegenstände, die länger als 300x300 sind.

IVE versucht jquery wie folgt zu verwenden:

$(window).load(function() { 
     $(".overlay").each(function() { 
      var $parentHeight = $(".overlay").parent().height(); 

      $(".overlay").css("margin-top", -$parentHeight); 
     }); 
    }); 

, dass das gleiche Ergebnis hatte.

Answer 1

Sie sollten oben verwenden: 0 nicht margin-top: -100%;

.overlay { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    opacity: 0; 
    z-index: 1; 
    -webkit-transition: .2s all; 
    position: absolute; 
    top:0; 
} 

Ich habe Bearbeiten auf Ihrem Stil sehen sie hier: https://jsfiddle.net/IA7medd/ngmpm5x0/