CodePen Embed - Shape hover effects

    <!--[if IE]>
      <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<script src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/js/snap.svg-min.js"></script>

<body style="background: #333;">
<div class="container">
      <section id="grid" class="grid clearfix">
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/1.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/3.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/5.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/7.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/2.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/4.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/6.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
        <a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
          <figure>
            <img src="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/img/8.png" />
            <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
            <figcaption>
              <h2>Name</h2>
              <p>Description.</p>
            </figcaption>
          </figure>
        </a>
      </section>
    </div><!-- /container -->
</body>

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

/* Common style */
.grid {
  margin: 40px auto 120px;
  max-width: 1000px;
  width: 90%;
}

.grid a {
  float: left;
  max-width: 250px;
  width: 25%;
  color: #333;
}

.grid a:nth-child(odd) {
  margin: 30px 0 -30px 0;
}

.grid figure {
  position: relative;
  overflow: hidden;
  margin: 5px;
  background: #333;
}

.grid figure img {
  position: relative;
  display: block;
  width: 100%;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.grid figcaption {
  position: absolute;
  top: 0;
  z-index: 11;
  padding: 10px;
  width: 100%;
  height: 100%;
  text-align: center;
}

.grid figcaption h2 {
  margin: 0 0 20px 0;
  color: #3498db;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 130%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.grid figcaption p {
  padding: 0 20px;
  color: #aaa;
  font-weight: 300;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption p {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.grid figure button {
  position: absolute;
  padding: 4px 20px;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style for SVG */
.grid svg {
  position: absolute;
  top: -1px; /* fixes rendering issue in FF */
  z-index: 10;
  width: 100%;
  height: 100%;
}

.grid svg path {
  fill: #fff;
}

/* Hover effects */
.grid a:hover figure img {
  opacity: 1;
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.grid a:hover figcaption p {
  opacity: 0;
}

/* Individual styles */
.demo-1 body {
  background: #3498db;
}

.demo-1 .grid figure button,
.demo-3 .grid figure button {
  top: 50%;
  left: 50%;
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
  opacity: 0;
  -webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
  transform: translateY(-50%) translateX(-50%) scale(0.25);
}

.demo-1 .grid a:hover figure button,
.demo-3 .grid a:hover figure button {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
  transform: translateY(-50%) translateX(-50%) scale(1);
}

.demo-2 body {
  background: #e74c3c;
}

.demo-2 .grid figcaption h2 {
  color: #e74c3c;
}

.demo-2 .grid figcaption p {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.demo-2 .grid figure button {
  bottom: 0;
  left: 0;
  padding: 15px;
  width: 100%;
  background: #fff;
  color: #333;
  font-weight: 300;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.demo-2 .grid a:hover figure button {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.demo-2 .grid figcaption h2, 
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h2,
.demo-3 .grid figcaption p {
  -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
  timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
}

.demo-2 .grid a:hover figcaption p,
.demo-3 .grid a:hover figcaption p {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

.demo-3 body {
  background: #52be7f;
}

.demo-3 .grid figcaption h2 {
  color: #52be7f;
}

.demo-3 .grid a:hover figcaption h2 {
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}

/* Media Queries */
/* Let's redefine the width of each anchor and the margins */

@media screen and (max-width: 58em) {
  .grid a {
    width: 33.333%;
  }

  .grid a:nth-child(odd) {
    margin: 0;
  }

  .grid a:nth-child(3n-1) {
    margin: 30px 0 -30px 0;
  }
}

@media screen and (max-width: 45em) {
  .grid {
    max-width: 500px;
  }

  .grid a {
    width: 50%;
  }

  .grid a:nth-child(3n-1) {
    margin: 0;
  }

  .grid a:nth-child(even) {
    margin: 30px 0 -30px 0;
  }


  .grid figcaption h2 {
    margin-bottom: 0px;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  .grid figcaption p {
    margin: 0;
    padding: 0 10px;
  }
}

@media screen and (max-width: 27em) {
  .grid {
    max-width: 250px;
  }

  .grid a {
    width: 100%;
  }

  .grid a:nth-child(even) {
    margin: 0;
  }
}

//* Taken from a codrops article https://tympanus.net/Tutorials/ShapeHoverEffectSVG/ *\\



var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function() {
  
        function init() {
          var speed = 250,
            easing = mina.easeinout;

          [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
              pathConfig = {
                from : path.attr( 'd' ),
                to : el.getAttribute( 'data-path-hover' )
              };

            el.addEventListener( 'mouseenter', function() {
              path.animate( { 'path' : pathConfig.to }, speed, easing );
            } );

            el.addEventListener( 'mouseleave', function() {
              path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
          } );
        }

        init();

      })();

This Pen is owned by Hesbes on CodePen.

See more by @hesbes on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.