JSFiddle - React, Tailwind, and code Playground

by dAvidcA

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="http://www.queness.com/resources/html/slicing/js/jquery.easing.1.3.js"></script>
<div class="contenedor">
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/1.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/2.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/3.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/4.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/5.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div> 
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/6.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
    <div class="qitem"><a href="#"><img src="http://www.queness.com/resources/html/slicing/7.gif" alt="Test 1" title="" width="200" height="200"/></a>
        <span class="caption"><h4>Clavo</h4><p>Clavo de medida.</p></span></div>
</div>

CSS

body {
    font-family:arial;	
}

.qitem {
    width:126px;
    height:126px;	
    border:4px solid #222;	
    margin:5px 5px 5px 0;
    background: url('bg.gif') no-repeat;
    
    
    /* required to hide the image after resized */
    overflow:hidden;
    
    /* for child absolute position */
    position:relative;
    
    /* display div in line */
    float:left;
    cursor:hand; cursor:pointer;
}

.qitem img {
    border:0;
    
    /* allow javascript moves the img position*/
    position:absolute;
    z-index:200;
}

.qitem .caption {
    position:absolute;
    z-index:0;	
    color:#ccc;
    display:block;
}

.qitem .caption h4 {
    font-size:12px;
    padding:10px 5px 0 8px;
    margin:0;
    color:#369ead;
}

.qitem .caption p {
    font-size:10px;	
    padding:3px 5px 0 8px;
    margin:0;
}



/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
    position:absolute;
    background-repeat: no-repeat; 
    float:left;
}

.topLeft {
    background-position: top left; 	
} 

.topRight {
    background-position: top right; 
} 

.bottomLeft {
    background-position: bottom left; 
} 

.bottomRight {
    background-position: bottom right; 
}

.clear {
    clear:both;	
}

JavaScript

$(document).ready(function() {
    
    //Custom settings
    var style_in = 'easeOutBounce';
    var style_out = 'jswing';
    var speed_in = 1000;
    var speed_out = 300;    
    
    //Calculation for corners
    var neg = Math.round($('.qitem').width() / 2) * (-1);   
    var pos = neg * (-1);   
    var out = pos * 2;
    
    $('.qitem').each(function () {
        
        url = $(this).find('a').attr('href');
        img = $(this).find('img').attr('src');
        alt = $(this).find('img').attr('img');
        
        $('img', this).remove();
        $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
        $(this).children('div').css('background-image','url('+ img + ')');
        
        $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});   
        $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});    
        $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); 
        $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});  
        
    }).hover(function () {
        
        $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); 
        $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});    
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});   
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});  
        
    },
             
             function () {
                 
                 $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});   
                 $(this).find('div.topRight').stop(false, true).animate({top:0,...