JSFiddle - React, Tailwind, and code Playground

by Raymond Uphoff

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a href="#item2">
                        <figure>
                            <img src="http://www.myradon.nl/img/thumb-customerconnect-responsive-website.jpg" alt="bla bla">
                            <svg version="1.1" class="background-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 400 400" xml:space="preserve" preserveAspectRatio="none">
                                <ellipse cx="200" cy="-625" rx="400" ry="2"/>
                            </svg>
                            <figcaption>
                                <h2 class="h3">Lorum ipsum Dolur</h2>
                                <svg class="magnifier-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                                    <path d="M460.475,408.443L351.4,299.37c15.95-25.137,25.2-54.923,25.2-86.833 C376.601,122.914,303.687,50,214.062,50c-89.623,0-162.537,72.914-162.537,162.537s72.914,162.537,162.537,162.537 c30.326,0,58.733-8.356,83.055-22.876L406.918,462L460.475,408.443z M96.315,212.538c0-64.927,52.819-117.748,117.746-117.748 c64.926 0,117.748,52.821,117.748,117.748c0,64.926-52.822,117.747-117.748,117.747C149.135,330.285,96.315,277.464,96.315,212.538z M282.276,231.882h-47.729v47.729h-36.859v-47.729h-47.73v-36.86h47.73v-47.729h36.859v47.729h47.729V231.882z"/>
                                </svg>
                            </figcaption>
                        </figure>
                    </a>
                </div>

                <div...

CSS

.container {
  text-align: center;
}
header {
  margin-bottom: 100px;
  padding: 50px 0;
  background-color: #99cc01
}

.center-elem {
  margin: 0 auto;
}

a.center-elem {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding: 0;
}

.arrow-icon {
  width: 100px;
  height: 100px;
}

.arrow-icon circle {
  fill: #ffdd00;
  fill-opacity : 0;
  stroke: #ffdd00;
  stroke-width: 4;
}

.arrow-icon polygon {
  fill: #ffdd00;
  stroke: none;
}

.col-md-4 {
    position: relative;
    padding-bottom: 30px;
}

.background-svg {
    display: block;
}

ellipse {
    fill: #19b2d1;
    stroke: none;
}

.col-md-4 a {
    position: relative;
    display: block;
    text-align: center;
}

.col-md-4 a img {
  display: block;
  max-width: 100%;
  margin-bottom: 0;
}

.col-md-4 a .background-svg {
  position: absolute;
  top: -1px;
  /* fixes rendering issue in FF */

  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
}

.col-md-4 a figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 14px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.col-md-4 a h2,
.col-md-4 a p {
  line-height: 1em;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* avoid flickering and glitches */

}


.col-md-4 a img {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

.col-md-4 a figcaption,
.col-md-4 a h2,
.col-md-4 a .magnifier-icon {
  -webkit-transition: transition 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
          transition: transition 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.col-md-4 a figcaption {
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform: translateY(-14px);
     -moz-transform: translateY(-14px);
      -ms-transform: translateY(-14px);
         ...

JavaScript

(function() {
	"use strict";
    
    var animateThumbs = function() {
        var $anchors 		= $( 'div.col-md-4' ).children( 'a' ),
            ellipse 		= $($anchors[0]).find( 'ellipse'),
            duration		= .75,
                ellipseProps	= {
                    from: {
                        cy: ellipse.attr('cy'),
                        rx: ellipse.attr('rx'),
                        ry: ellipse.attr('ry')
                    },
                    to: {
                        cy: -500,
                        rx: 600,
                        ry: 750
                    }
                };
        
        //Let's set on every a-element a timeline as method
        $anchors.each( function(index, elem) {
            
            var ellipse 	= $(elem).find( 'ellipse' ),
                animateSvgBG= new TimelineMax({repeat: 0, paused: true });
            
            animateSvgBG.fromTo(ellipse, duration,
                                //from
                                { attr: { 
                                    cy: ellipseProps.from.cy,
                                    rx: ellipseProps.from.rx,
                                    ry: ellipseProps.from.ry
                                }},
                                //to
                                { attr: { 
                                    cy: ellipseProps.to.cy,
                                    rx: ellipseProps.to.rx,
                                    ry: ellipseProps.to.ry
                                }}
                               );
            elem.animate = animateSvgBG;
        })

            $anchors.on({
                mouseenter: function(event) {
                    TweenMax.to(this.animate, duration, {time:this.animate.duration(), ease:Bounce.easeOut});
                },
                mouseleave: function(event) {
                    TweenMax.to(this.animate, duration / 3, {time:0, ease:Back.easeIn});
                }	
            });        
...