<div class="example-cntr">
    <h1>CSS <code>:hover</code> pseudo-class</h1>
    <p>The <code>:hover</code> pseudo-class is used to style an element when the pointer is over it. It doesn’t have to be used with links, albeit is the most common use case.</p>
    <p>This pseudo-class has to got be one of the most, if not THE most, versatile feature of CSS since so many great things can be accomplished with this pseudo-class.</p>
    <!-- Fancy effect -->
    <h3>Fancy effect</h3>
    <section class="fancy-ctnr flex-ctnr">
        <!-- "Guillotine" style -->
        <a href="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index.html" target="_blank" title="Link opens in a new tab" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
            <figure>
                <img src="http://lorempixel.com/300/400/technics/2">
                <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
                <figcaption>
                    <h2>Hover effect using SVG</h2>
                    <p>Guillotine shape</p>
                    <span class="button">View Article on Tympanus.net</span>
                </figcaption>
            </figure>
        </a>
        <!-- "Bubble" style -->
        <a href="https://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html" target="_blank" title="Link opens in a new tab" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
            <figure>
                <img src="http://lorempixel.com/300/400/technics/2">
                <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
                <figcaption>
                    <h2>Hover effect using SVG</h2>
                    <p>Bubble shape</p>
                    <span class="button">View Article on Tympanus.net</span>
                </figcaption>
            </figure>
        </a>
    </section>
    <!-- Navigation bars -->
    <h3>Navigation bars</h3>
    <section class="flex-ctnr nav-bars">
        <ul class="hvr-underline-from-left">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
        <ul class="hvr-shutter-out-horizontal">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </section>
    <!-- Images -->
    <h3>Images</h3>
    <section class="flex-ctnr images">
        <a href="#" class="zoom"><img src="http://lorempixel.com/300/200/technics/2"></a>
        <a href="#" class="sepia"><img src="http://lorempixel.com/300/200/fashion/7"></a>
    </section>
    

</div>
/* Hover effects using SVG
   Adapted from "Shape Hover Effect with SVG" - https://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ */

/* Fancy effect */
.fancy-ctnr { margin: auto;
  figure {
    position: relative;
    overflow: hidden;
    margin: 5px;
    background: #333;
    img {
      position: relative;
      display: block;
      width: 100%;
      opacity: .7;
      transition: opacity .3s;
    }
  }
  figcaption {
    position: absolute;
    top: 0;
    z-index: 11;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    h2 {
      margin: 0;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 300;
      font-size: 130%;
      transition: transform .3s;
      transform: translateY(50px);
    }
    p {
        color: rgba(black,.5);
        font-size: 20px;
        transform: translateY(50px);
      }
  }
  figure .button {
    width: 90%;
    padding: 10px;
    position: absolute;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    transition: opacity .3s, transform .3s;
  }
  figcaption, h2, p figure .button { backface-visibility: hidden; }
  svg {
    position: absolute;
    top: -1px;
    /* fixes rendering issue in FF */
    z-index: 10;
    width: 100%;
    height: 100%;
    path { fill: $y; }
  }
  a:hover {
    figure img { opacity: 1; }
    figcaption {
      h2 { transform: translateY(0); }
      p {
        transform: translateY(0);
        opacity: 0;
      }
    }
  }
  figure .button {
    top: 50%;
    left: 50%;
    border: 3px solid #fff;
    background: rgba(white, 0.7);
    color: black;
    opacity: 0;
    transform: translateY(-50%) translateX(-50%) scale(0.25);
  }
  a:hover figure .button {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1);
  }
}

/* Hover effects on Navigation bars
   Adapted from Hover.css - https://ianlunn.github.io/Hover/ */

/* Underline From Left */
.hvr-underline-from-left {
    a {
        display: inline-block; 
        vertical-align: middle;
        backface-visibility: hidden;
        transform: translateZ(0);
        -moz-osx-font-smoothing: grayscale; 
        position: relative; 
        overflow: hidden;
        &:before {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 100%;
            bottom: 0;
            background: $y;
            height: 4px;
            transition-property: right;
            transition-duration: .4s;
            transition-timing-function: ease-out;
        }
        &:hover:before,
        &:focus:before,
        &:active:before { right: 0; }
    }
}

/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
    a {
        display: inline-block;
        vertical-align: middle;
        backface-visibility: hidden;
        transform: translateZ(0);
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        background: #333;
        transition-property: color;
        transition-duration: 0.3s;       
        
        &:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: $r;
            transform: scaleX(0);
            transform-origin: 50%;
            transition-property: transform;
            transition-duration: .2s;
            transition-timing-function: ease-out;
        }
        &:hover,
        &:focus,
        &:active {
            color: white;
        }
        &:hover:before,
        &:focus:before,
        &:active:before {
            transform: scaleX(1);
        }
    }
}

/* Hover effects on Images 
   Adapted from @nxworld's Pen: "demo:CSS image hover effects" https://codepen.io/nxworld/pen/ZYNOBZ */

/* Zoom In */
.zoom {
    display: inline-block;
    width: 300px; height: 200px;
    overflow: hidden;
    img {
        transform: scale(1);
        transition: .4s ease-in-out;
    }
    & img:hover {
        transform: scale(1.3);
    }
}

/* Sepia */
.sepia {
    img {
        display: block;
        filter: sepia(1);
        transition: .3s ease-in-out;        
    }
    &:hover img {
        filter: sepia(0);
    }
}





//Styling stuff not needed for demo
body {
    text-align: left;
    line-height: 1.5;
}
a { text-decoration: none; }
h1 {
    font-size: 22px;
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
h3 {
    padding-bottom: 5px;
    border-bottom: #444 1px solid;
    font-family: Georgia;
    font-style: italic;
}
code { font-size: 1em; }
ul:not(.normal) {
    padding: 0;
    list-style-type: none;
}
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);
    & > code {
        display: block;
        margin-bottom: 10px;
        font-size: 22px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
.flex-ctnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
//All navigation bars
.nav-bars {
    ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 45%;
    }
    li {
        flex-grow: 1;
        margin: 1%;
        text-align: center;
    }
    a {
        display: block;
        padding: 10px;
        background: rgba(black,.1);
    }    
}

View Compiled
//This uses SnapSVG.js
(function() {

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

        [].slice.call(document.querySelectorAll('.fancy-ctnr > 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();

})();

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/codepen-base_3.scss

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/snap.svg-min.js