JSFiddle - React, Tailwind, and code Playground

by g3legacy

HTML

<html>
    <head>
        <script type="text/javascript" src="http://www.ransomedesign.co.uk/new_designs/scripts/animate_plugin.js"></script>       
        
    </head>
    <body>
        <div class="trans_bg">
            <h2 class ="portfolio">Portfolio</h2>
        </div>
    </body>
</html>

CSS

.trans_bg, .trans_bg_submit {
    background:url(http://www.ransomedesign.co.uk/new_designs/slices/images/images/images/trans_curve_two_17.jpg) 0 0 repeat-y;
    margin:0;
    padding:0;
    
}

h2.portfolio {
    background:url(http://www.ransomedesign.co.uk/new_designs/slices/images/images/images/trans_portfolio_03.png) top left no-repeat;
    text-indent:-99999px;
    height:56px;
    width:290px;
    margin:0;
    padding:0;
}

JavaScript

$('.trans_bg').css({
    backgroundPositionX: 0,
    backgroundPositionY: 0
});

$('.trans_bg').hover(

function() {
    $(this).stop().animate({
        backgroundPositionX: 0,
        backgroundPositionY: -250
    }, 500);
}, function() {
    $(this).stop().animate({
        backgroundPositionX: 0,
        backgroundPositionY: 0
    }, 400);
});