JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700"></script>
<div id="gallery-container">with container div
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div>
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div>
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
               <div class="info"><h3 class="heading">Lorem ipsum</h3>
        <p>dolor sit amet, consectetur adipiscing elit. Nam vel ultricies sem. Praesent posuere, augue quis aliquet vestibulum, metus tellus vehicula sem, tincidunt luctus nisl sem et orci.</p></div>
            </a>

        </li>
    </ul>
</div>
<div class="gallery">
    <ul>
        <li> <a href="#" title="">
               <img...

CSS

#gallery-container{
	width:600px;
	height:338px;
	background-color:#09C;
	position: absolute;
	z-index:1000;
	left:0px;
	top:400px;
	}
.heading {
    font-family:'Roboto', sans-serif;
    font-size: 16px;
    color:#333;
    padding-left:20px;
    padding-right:20px;
}
p {
    font-family:'Roboto', sans-serif;
    font-size: 12px;
    color:#333;
    padding-left:20px;
    padding-right:20px;
}
.gallery {
    width: 100%;
    height: auto;
}
.gallery li {
    width: 300px;
    height: 169px;
    position: relative;
    float: left;
    overflow: hidden;
    background-color:#ccc;
}
.transform {
    /* mouseleave */
    -moz-transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
li:hover .transform {
    /* mouseenter */
    -moz-transition-duration: 700ms;
    -webkit-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}
.transform-img {
    /* mouseleave */
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
li:hover .transform-img {
    /* mouseenter */
    -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.gallery a {
    width: 100%;
    height: 100%;
    display: block;
}
.gallery img {
    position: relative;
}
.gallery .info {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    opacity:1;
    background: #ccc;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

JavaScript

$(".gallery li").on("mouseenter mouseleave", function (e) {

      var w = $(this).width();
      var h = $(this).height();

      var x = (e.pageX - $(this).offset().left - (w / 2)) * (w > h ? (h / w) : 1);
      var y = (e.pageY - $(this).offset().top - (h / 2)) * (h > w ? (w / h) : 1);

      var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

      /** check for direction **/
      switch (direction) {
          case 0:
              // direction top
              var slideFrom = {
                  "top": "-100%",
                      "right": "0"
              };
              var slideTo = {
                  "top": 0
              };
              var imgSlide = "0, 100";

              break;
          case 1:
              // direction right
              var slideFrom = {
                  "top": "0",
                      "right": "-100%"
              };
              var slideTo = {
                  "right": 0
              };
              var imgSlide = "-100, 0";

              break;
          case 2:
              // direction bottom
              var slideFrom = {
                  "top": "100%",
                      "right": "0"
              };
              var slideTo = {
                  "top": 0
              };
              var imgSlide = "0, -100";

              break;
          case 3:
              // direction left
              var slideFrom = {
                  "top": "0",
                      "right": "100%"
              };
              var slideTo = {
                  "right": 0
              };
              var imgSlide = "100, 0";

              break;
      }

      if (e.type === 'mouseenter') {
          var element = $(this);

          element.find(".info").removeClass("transform").css(slideFrom);

          setTimeout(function () {
              element.find(".info").addClass("transform").css(slideTo);
          }, 10);


      } else {
          var element = $(this);

 ...