JSFiddle - React, Tailwind, and code Playground

by evoSL

HTML

<div id="landing-content">
    <section class="slider"> 
        <img src="http://i.imgur.com/fVWomWz.png"></img>
        
    </section>
</div>

CSS

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;http://jobs.jsfiddle.net/
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

JavaScript

$('#landing-content').mousemove(function(e){
    $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');
});