JSFiddle - React, Tailwind, and code Playground

by daugaard47

HTML

<div class="container">

<div class="eight columns">
<div class="phone" align="center"><img src="http://daugaard47.com/misc/logos/phone.png" class="max-img-phone"></div>
    </div>
    </div>

CSS

.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 40px 0; }

.container .eight.columns { width: 460px; }

.max-img-phone{
	width:100%;
	height:auto;
	max-width:332px;
	min-width:300px;
}

.phone{
	background-image:url(http://daugaard47.com/misc/logos/screen1.jpg);
	background-repeat:no-repeat;
	background-position:96px 76px;
    cursor:pointer;
}

.phone-two{
	background-image:url(http://daugaard47.com/misc/logos/screen2.gif);
	background-repeat:no-repeat;
	background-position:96px 76px;
    cursor:pointer;
}

JavaScript

$(document).ready(function() {     
    $('.phone').hover(function(){     
        $('.phone').addClass('phone-two');    
    },     
    function(){    
        $('.phone').removeClass('phone-two');     
    });
});