JSFiddle - React, Tailwind, and code Playground

by smash120

HTML

<div class="box">
                    <div class="container_12">            
                        <div class="grid_6">
                            <div class="sector" id="public">
                                <a href="" class="no-dec"><img style="margin-left: 80px" class="resize" src="http://www.crashplan.com/enterprise/images/home_software_icon.png" alt="" /></a>
                                <a href="" class="no-dec">
                                    <h5 class="public sector">Public Sector</h5>
                                    <p class="sector-p">
                                        Flexible solutions include instant cloud-based disaster recovery, secure private cloud backup, or hybrid deployments for the best of both. 
                                    </p>
                                </a>
                            </div>
                        </div>
                        
                    </div>
                </div>

CSS

.sector{
    margin:50px auto;
    text-align: center
}
h5.public,.private{
    font:normal 26px "Freight Sans Light",Arial,Helvetica;
    color: rgb(204, 204, 204);
    margin: 0;
}

.sector-p{
    color: rgb(114, 114, 114);
    font-size: 15px;
    text-align: center;
    width: 280px;
    margin: 0 auto;
}

JavaScript

$('.resize').css({
    width: '426px',
    height: '314px',
    display: 'block',
    'margin-left': '80px'
});
var current_h = null;
var current_w = null;

$('.resize').hover(

function() {
    current_h = $(this, 'img')[0].height;
    current_w = $(this, 'img')[0].width;
    $(this).stop(true, false).animate({
        width: (current_w * (500 / current_w)),
        height: (current_h * (369 / current_h)),
        'margin-left': '50px' 
    }, 300);

    $(this).parents('.sector').find('h5').animate({
        'font-size': '40px',
        margin: '20px 0 0 0 ',
        color: 'rgb(61, 61, 61)'
    }, 300);

    $(this).parents('.sector').find('p').animate({
        color: 'rgb(0, 0, 0)'
    }, 300);
}, function() {
    $(this).stop(true, false).animate({
        width: current_w + 'px',
        height: current_h + 'px',
        'margin-left': '80px',
        display: 'block'
    }, 300);

    $(this).parents('.sector').find('h5').animate({
        'font-size': '26px',
        margin: 0,
        color: 'rgb(204, 204, 204)'
    }, 300);

    $(this).parents('.sector').find('p').animate({
        color: 'rgb(114, 114, 114)'
    }, 300);
});