JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div class="portfoliobox">
  <div class="rollover">Info 1</div>
</div>

<div class="portfoliobox">
  <div class="rollover">Info 2</div>
</div>

CSS

.portfoliobox {
  width: 300px;
  height: 300px;
  background-color: #009;
  overflow: hidden;
  display: inline-block;
}
.portfoliobox .rollover {
    height: 220px;
    width: 100%;
    background-color: #090;
    margin-top: 300px;
}

JavaScript

$('.portfoliobox').hover(
	function(){ roll(this, 80); },
	function(){ roll(this, 300); }
);

roll = (e,n) => $(e).find(".rollover").stop().animate({marginTop:n+'px'},160);