JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700"></script>
<div id="gallery-container">
<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:507px;
    margin-right:-100px;
    position: relative;
    float: left;
    z-index:999;
}
#gallery-container .heading {
    font-family:'Roboto', sans-serif;
    font-size: 16px;
    color:#333;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
}
#gallery-container p {
    font-family:'Roboto', sans-serif;
    font-size: 12px;
    color:#333;
    padding-left:20px;
    padding-right:20px;
}
.gallery {
	width: 300px;
	height: 169px;
	margin-top: 1200px;
	overflow: hidden;
	position: relative;
	float:left;
	background-color:#ccc;
    -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
	-moz-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
	-o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
	transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
}
.gallery li {
	width: 300px;
	height: 169px;
	background-color: #ccc;
}
.transform {
    /* mouseleave */
    -webkit-transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-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);
    -moz-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
}
li:hover .transform-img {
    /* mouseenter */
    -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 800ms cubic-bezier(0.19, 1, 0.22,...

JavaScript

/*Fly in*/
  $(document).ready(function () {
       var count = 600;
    var interval = 40
    $(".gallery").each(function () {
        $(this).delay(count).animate({
marginTop:0,
}, 600 );
        count += interval;
      });
  });
  /*Fly in End*/
  $(document).ready(function(){  $(".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') {
  ...