JSFiddle - React, Tailwind, and code Playground

by waffl

HTML

<body>

<article> 
    <div class="frontimage"><img src="http://placehold.it/350x500" alt="" width="350" height="500" /></div> 
    
    <div class="entry"> 
        <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>    
</article>

<article> 
    <div class="frontimage"><img src="http://placehold.it/300x300" alt="" width="300" height="300" /></div> 
    
    <div class="entry"> 
        <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>    
</article>

</body>

CSS

article {
    margin: 25px;
    position: relative;
    display: block;
    float: left;
}

article>div.frontimage {
    position: relative;
    top: 0;
    left: 0;
}

article>div.entry {
    background: red;
    position: absolute;
    top: 3px;
    left: 5px;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.below {
    z-index: -100;
}

.above {
    z-index: 1000;
}

JavaScript

var $j = jQuery.noConflict();

$j(document).ready(function(){

    $j('article').hover(
        function(){
            $j(this).children('.frontimage').addClass('below');
            $j(this).children('.entry').addClass('above');
            console.log('hey');
        },
        function() {
            $j(this).children('.frontimage').removeClass('below');
            $j(this).children('.entry').removeClass('above');
        }    
    );

});