JSFiddle - React, Tailwind, and code Playground

by lmoroz

HTML

<div>
  <img src="https://cdn.designsmaz.com/wp-content/uploads/2016/03/Landr-Free-App-Landing-Page-PSD-Template-Preview.jpg" alt=""></div>
<div>
  <img src="https://cdn.designsmaz.com/wp-content/uploads/2016/03/Landr-Free-App-Landing-Page-PSD-Template-Preview.jpg" alt=""></div>
<div>
  <img src="https://cdn.designsmaz.com/wp-content/uploads/2016/03/Landr-Free-App-Landing-Page-PSD-Template-Preview.jpg" alt=""></div>

SCSS

div {
  width: 250px;
  height: 450px;
  overflow: hidden;
  display: inline-block;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
  img {
    max-width: 100%;
    transition: all 1s linear;
  }
}

JavaScript

$("div").hover(function() {
  $(this).children("img").css({
    'transform': 'translateY(-' + ($(this).children("img").height() - $(this).height()) + 'px)'
  });
}, function() {
  $("div img").css({
    transform: 'translateY(0)'
  });
});

//console.log($('div').children("img").height())