JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
Stuffilitis here<br/><br/><br/>Morhttp://jsfiddle.net/builtbymay/9sKTU/#basee stuffilitis here<br/><br/><br/>Stuffilitis here<br/><br/><br/><br/><br/> 
<div class="ninja">
    <span class="pizza1">Ninja's love pizza!</span>
    <span class="pizza2"></span>
    <span class="pizza3"></span>

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

.ninja {
    display:block;
    float:left;
    height:260px;
    overflow:hidden;
    padding:20px;
    position:relative;
    width:100%;
}
.pizza1 {
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    font-weight:300;
    left:55px;
    letter-spacing:2px;
    text-shadow: 3px 3px 5px #fff;
    top:134px;
    position:absolute;
}
.pizza2 {
    background-image: url(http://www.gopusa.com/news/files/2012/10/pizza.jpg);
     /* Prevent background color leak outs */
    -webkit-background-clip: padding-box; 
    -moz-background-clip:    padding; 
    background-clip:         padding-box;
    background-repeat:no-repeat;
    background-position:0 center;
    -webkit-border-radius:200px;
    -moz-border-radius:200px;
    border-radius:200px;
    border: 10px solid #fff;
    display:block;
    float:left;
    height:240px;
    position:absolute;
    width:240px;
    z-index:-1;
}
 .pizza3 {
    background-image: url(http://0.s3.envato.com/files/57402247/fap-09.jpg);
    height:400px;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    width:600px;
    z-index:-2;
} 
.spasm {
    background-position:0 -50px;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.spasm2 {
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}

JavaScript

$('.ninja').mouseenter(function() {
	$(this).find('.pizza2').addClass('spasm');

	$(this).mouseleave(function() {
		$(this).find('.pizza2').addClass('spasm2').removeClass('spasm');
	});
});