Snr Naldo Snr Naldo - 6 months ago 11
Javascript Question

Image Overlay "margin-top" does not show correctly with differing image heights

the issue is best visible in the fiddle JsFiddle

The image overlay is set to margin-top: -100%; but it doesnt work for items, who are longer then 300x300.

ive tried to use jquery as follows:

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

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


That had the same outcome.

Answer

You should use top:0 not margin-top:-100%;

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

I did this edit on your style see it here : https://jsfiddle.net/IA7medd/ngmpm5x0/