JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div class="div">
    <a href=""><img src="http://1.bp.blogspot.com/_J4RmYF7HhOk/TOHDIRCUDbI/AAAAAAAAAMM/nuQOrqFS6JU/s320/exemplo1jh.jpg" /></a>
    <a href=""><img src="http://1.bp.blogspot.com/_J4RmYF7HhOk/TOHDIRCUDbI/AAAAAAAAAMM/nuQOrqFS6JU/s320/exemplo1jh.jpg" /></a>
    <a href=""><img src="http://1.bp.blogspot.com/_J4RmYF7HhOk/TOHDIRCUDbI/AAAAAAAAAMM/nuQOrqFS6JU/s320/exemplo1jh.jpg" /></a>
    <a href=""><img src="http://1.bp.blogspot.com/_J4RmYF7HhOk/TOHDIRCUDbI/AAAAAAAAAMM/nuQOrqFS6JU/s320/exemplo1jh.jpg" /></a>
    <a href=""><img src="http://1.bp.blogspot.com/_J4RmYF7HhOk/TOHDIRCUDbI/AAAAAAAAAMM/nuQOrqFS6JU/s320/exemplo1jh.jpg" /></a>
    <a href=""><img src="http://1.bp.blogspot.com/_J4RmYF7HhOk/TOHDIRCUDbI/AAAAAAAAAMM/nuQOrqFS6JU/s320/exemplo1jh.jpg" /></a>
</div>

    <nav>
        <a href="#" class="nav-esq">ESQ</a>
        <a href="#" class="nav-dir">DIR</a>
    </nav>

CSS

.div{
    width:950px;
    height:300px;
    display:inline-block;
    position:relative;
}

.nav-esq{
    color:#000;
    position:absolute;
    top:0;
    left:0;
    height:300px;
    opacity:0.5;
    background-color:#000;
}

.nav-dir{
    color:#000;
    position:absolute;
    top:0;
    right:0;
    height:300px;
    opacity:0.5;
    background-color:#000;
}

JavaScript

$(".nav-dir").on("mouseover", function() {
    $(".div").animate({"right":"300px"}, 500);
});


$(".nav-esq").on("mouseover", function () {
    $(".div").animate({"right":"0px"}, 500);
});