JSFiddle - React, Tailwind, and code Playground

by Raymond Uphoff

HTML

<script src="https://rawgithub.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js"></script>
                    <div id="thumbs-work-container">
                        <ul>
                            <li class="item1">
                                <a href="#item1">
                                    <figure>
                                        <img src="http://www.myradon.nl/img/image-loader-white.gif" data-src="http://www.myradon.nl/img/thumb-cctweet-webapp.jpg" alt="Respsonsive twitter-driven webapplicatie">
                                        <svg class="round-bg-svg" style="pointer-events: none" viewBox="0 0 329 245" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" xml:space="preserve">
                                            <circle cx="164.5" cy="-650" r="600"/>
                                        </svg>
                                        <figcaption>
                                            <h2 class="h3">Twitter Driven app</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>
           ...

CSS

figure, img, svg, circle, figcaption, h2 {
    pointer-events: none;
}
img {
  max-width: 100%;
  margin-bottom: 28px;
  vertical-align: middle;
  border-width: 0;
  -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin-bottom: 28px;
}

figure figcaption {
  display: block;
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

#thumbs-work-container {
  display: inline;
  float: left;
  width: 98.4375%;
  margin: 0 0.78125%;
}

#thumbs-work-container ul {
  display: block;
  width: 101.5625%;
  padding: 0;
  margin: 0 -0.78125%;
  list-style: none outside none;
  *zoom: 1;
}

#thumbs-work-container ul:before,
#thumbs-work-container ul:after {
  display: table;
  content: "";
}

#thumbs-work-container ul:after {
  clear: both;
}

#thumbs-work-container ul li {
  position: relative;
  display: inline;
  float: left;
  width: 45%;
  padding-bottom: 1.5625%;
  margin: 0 0.78125%;
  text-align: center;
  *zoom: 1;
}

#thumbs-work-container ul li:before,
#thumbs-work-container ul li:after {
  display: table;
  content: "";
}

#thumbs-work-container ul li:after {
  clear: both;
}

#thumbs-work-container a {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  *zoom: 1;
}

#thumbs-work-container a:before,
#thumbs-work-container a:after {
  display: table;
  content: "";
}

#thumbs-work-container a:after {
  clear: both;
}

#thumbs-work-container a figure {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

#thumbs-work-container a img {
  display: block;
  margin-bottom: 0;
}

#thumbs-work-container a .round-bg-svg {
  position: absolute;
  top: -1px;
  /* fixes rendering issue in FF */

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

#thumbs-work-container 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;
         ...

JavaScript

var workThumbsBgMorfing = function() {
            var elems       = Snap( '#thumbs-work-container' ).selectAll( 'a' ),
                circle        = elems[0].select( 'svg.round-bg-svg circle' ),
                circleAnim  = {
                    from    : {
                        r  :     circle.attr( 'r' ),
                        cy  :    circle.attr( 'cy' )
                    },
                    to      :  {
                        r  :     '725',
                        cy :     '-550'
                    }
                };

            elems.forEach( function(elem) {
                (function() {
                    var circle      = elem.select( '.round-bg-svg circle' );

                    elem.hover(function(event) {
                        console.info("hover triggered by " + event.target.nodeName);
                        circle.animate( { 'cy' : circleAnim.to.cy, 'r' : circleAnim.to.r }, 1000, mina.elastic );
                    } , function(event) {
                        console.info("hovering off by " + event.target.nodeName);
                        circle.animate( { 'cy' : circleAnim.from.cy, 'r' : circleAnim.from.r }, 1000, mina.elastic );
                    } );
                })();
            });
        }
        workThumbsBgMorfing();