hoverwords

letter swaps on hover

by jack gold

HTML

<script src="http://tympanus.net/Development/SlidingLetters/js/jquery.easing.1.3.js"></script>
<script src="http://tympanus.net/Development/SlidingLetters/js/jquery.lettering.js"></script>
<div class="container">
    <div class="sl_examples"> <a href="#" class="thumb"><img src="http://placehold.it/300x200&text=img" /></a>
 <a href="#" class="caption" id="example1" data-hover="Stelle Lomont Rouhani">Big ideas, small screens</a>

    </div>
    <div class="sl_examples"> <a href="#" class="thumb"><img src="http://placehold.it/300x200&text=img" /></a>
 <a href="#" class="caption" id="example2" data-hover="Alex Mill">Dressed to impress</a>

    </div>
    <div class="sl_examples"> <a href="#" class="thumb"><img src="http://placehold.it/300x200&text=img" /></a>
 <a href="#" class="caption" id="example3" data-hover="John Salibello">Antiques, modernized</a>

    </div>
</div>

SCSS

* {
    box-sizing:border-box;
}
.container {
    padding:50px;
    text-align:center;
}
.sl_examples {
    display:inline-block;
    font-family:'Raleway', arial, sans-serif;
    font-weight:900;
    -webkit-font-smoothing:antialiased;
    font-size:14px;
    line-height:50px;
    color:#f0f0f0;
    text-transform:uppercase;
    text-align:left;
    // background-color: #e07;
    max-width:300px;
    img {
        max-width:260px;
    }
    &.wide {
        max-width:800px;
        img {
            max-width:560px;
        }
        margin-left:40px;
    }
}
.sl_examples a.caption {
    display:block;
    position:relative;
    float:left;
    clear:both;
    color:#fff;
    background: linear-gradient(115deg, #e07 80%, transparent 80%);
    // background:white;
    // background: linear-gradient(115deg, #fff 80%, transparent 80%);
    // color: #e07;
    height:50px;
    //white-space:nowrap;
    overflow:hidden;
    //width:6em;
    transition: 0.4s all;
    top:-20px;
    width:100%;
    text-align:center;
    z-index:10;
    padding-left:20px;
    transition: 0.7s all;
    /* &:after {
        content:"";
            display:block;
            background: linear-gradient(115deg, transparent 50%, rgba(255,255,255,0.35) 53%, rgba(255,255,255,0.35) 53%, transparent 56%);
            z-index:15;
            position:absolute;
            left:0; right:0;
            height:50px;
            top:0;
            transform:translateX(-70%);
            transition: 0.8s all;
            
        } */
}
.sl_examples a.caption:hover, .sl_examples a:hover + a {
}
.sl_examples a > span {
    height:50px;
    float:left;
    position:relative;
    overflow:hidden;
    text-align:center;
    // margin-right:0.5em;
}
.sl_examples a span span {
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    text-align:center;
}
.sl_examples a span span.sl-w1 {
    z-index:2;
}
.sl_examples a span span.sl-w2 {
    z-index:3;
}

JavaScript

/*
hoverwords plugin
*/
(function ($) {


    var aux = {
        toggleChars: function ($el, settings) {
            var $wrappers = $el.find('.sl-wrapper'),
                total = $wrappers.length,
                c1 = $el.hasClass('sl-w1') ? 'sl-w2' : 'sl-w1',
                c2 = $el.hasClass('sl-w1') ? 'sl-w1' : 'sl-w2';

            $el.addClass(c1).removeClass(c2);

            $wrappers.each(function (i) {
                var $wrapper = $(this),
                    interval;

                switch (settings.dir) {
                    case 'leftright':
                        interval = i * settings.delay;
                        break;
                    case 'rightleft':
                        interval = (total - 1 - i) * settings.delay;
                        break;
                };

                if (settings.delay) {
                    setTimeout(function () {
                        aux.switchChar($wrapper, $el, settings, c1, c2);
                    }, interval);
                } else aux.switchChar($wrapper, $el, settings, c1, c2);
            });
        },
        switchChar: function ($wrapper, $el, settings, c1, c2) {
            var $newChar = $wrapper.find('span.' + c1),
                $currentChar = $wrapper.find('span.' + c2),
                nextWrapperW = $currentChar.width();

            if ($newChar.length) nextWrapperW = $newChar.width();

            //new slides in
            if ($newChar.length) {
                var param = {
                    left: '0px'
                };
                if (settings.opacity) param.opacity = 1;

                $newChar.stop().animate(param, settings.speed, settings.easing);

                //animate the wrappers width
                $wrapper.stop().animate({
                    width: nextWrapperW + 'px'
                }, settings.speed);
            }

            //current slides out
            if (!settings.overlay || c1 === 'sl-w1') {
                if (settings.dir ===...