JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div id="features" class="row">
    <div id="enhancedtextwidget-17" class="feature feat1 col-xs-6 col-sm-3 widget_text enhanced-text-widget">
        <div class="textwidget widget-text"> <a class="inline-block" href="/about">
                <img class="featbutton img-responsive feat-rotate rotate-clockwise start" alt="Phi Philosophy" src="http://www.phisurgery.ca/images/featurettes/featurette1.png" data-ix="rotate-in">
                <div class="feat-overlay start">
                    <h3>Test<br>Testing</h3>
                    <div class="subtext">
                        Desfription text goes here
                        <br>
                        second line
                    </div>
                </div>

CSS

.feature {
    padding: 0 10px;
}
#features.row {
    margin: 0 -10px;
}
.feature a.inline-block {
    display:block;
}
.feature .textwidget {
    position:relative;
}
.feature h3 {
    text-align:center;
    text-transform: uppercase;
    font-size: 22px;
    font-weight:400;
}
.feature.feat1 h3 {
    color: #f26539;
}
.feature.feat2 h3 {
    color: #e14f87;
}
.feature.feat3 h3 {
    color: #bc4187;
}
.feature.feat4 h3 {
    color: #fbb658
}
.featbutton {
    display: inline;
    width: auto;
    height: auto;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
}
.feat-overlay {
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: -35%;
    display: inline;
    padding-right: 30px;
    padding-left: 30px;
    text-align:center;
    color: #aaa;
    -webkit-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -ms-transform: translate(0px, -50%);
    -o-transform: translate(0px, -50%);
    transform: translate(0px, -50%);
    -webkit-transition: -webkit-transform 0ms ease;
    -moz-transition: -webkit-transform 0ms ease;
    -o-transition: -webkit-transform 0ms ease;
    transition: transform 0ms ease;
    width: 100%;
}
.feat1 .featbutton.start {
    opacity: 0;
    -webkit-animation: feat1-animate 600ms 100ms 1 ease forwards;
    -moz-animation: feat1-animate 600ms 100ms 1 ease forwards;
    -ms-animation: feat1-animate 600ms 100ms 1 ease forwards;
    -o-animation: feat1-animate 600ms 100ms 1 ease forwards;
    animation: feat1-animate 600ms 100ms 1 ease forwards;
}
@-webkit-keyframes feat1-animate {
    0% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
        opacity: .17;
    }
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
   ...

JavaScript

//jQuery Custom Hover - Solution
//Alexander Dixon 2015
//http://stackoverflow.com/questions/31707927/jquery-hover-wont-work

var $menuShell = $('div#features > div'), $menuImg = $menuShell.find('img'), $featOverDiv = $menuShell.find('div.feat-overlay'), $sisterDivs = $menuShell.siblings();

var yesAnimate, noAnimate;

function startTimer() {
    yesAnimate = setTimeout(function() {
        //$menuImg.toggleClass('start');
        $featOverDiv.toggleClass('start');
    }, 600);
}

function leaveTimer() {
    noAnimate = setTimeout(function() {
        //$menuImg.toggleClass('start');
        $featOverDiv.toggleClass('start');
    }, 0);
}

$menuShell.not($sisterDivs).on('mouseenter', function() {
    startTimer();
    $menuImg.toggleClass('start-hover');
    $featOverDiv.toggleClass('start-hover');
});

$menuShell.not($sisterDivs).on('mouseleave', function() {
    leaveTimer();
    $menuImg.toggleClass('start-hover');
    $featOverDiv.toggleClass('start-hover');
});