JSFiddle - React, Tailwind, and code Playground

by felipepalazzo

HTML

<section class="feat-products cf">
            
    <ul>
<li><a href="http://fiveblu.dafiti.com.br/roupas-femininas/vestidos/" onclick="_gaq.push(['_trackPageview', 'http://fiveblu.dafiti.com.br/roupas-femininas/vestidos/']);">
    <div class="shop-now">
        <div class="circle">
            <span>SHOP NOW!</span>
        </div>
    </div>
    <img src="http://www.fiveblu.com/br/files/2012/09/banner_a1.jpg" alt="Vestidos"></a></li>
    
<li><a href="http://fiveblu.dafiti.com.br/special-price/fiveblu/?segment=feminino" onclick="_gaq.push(['_trackPageview', 'http://fiveblu.dafiti.com.br/special-price/fiveblu/?segment=feminino']);">
    <div class="shop-now">
        <div class="circle">
            <span>SHOP NOW!</span>
        </div>
    </div>
    <img src="http://www.fiveblu.com/br/files/2012/09/banner_b.jpg" alt="Queremos Descontos!"></a></li>
    
<li><a href="http://fiveblu.dafiti.com.br/calcados-masculinos/sapatenis/" onclick="_gaq.push(['_trackPageview', 'http://fiveblu.dafiti.com.br/calcados-masculinos/sapatenis/']);">
    <div class="shop-now">
        <div class="circle">
            <span>SHOP NOW!</span>
        </div>
    </div>
    <img src="http://www.fiveblu.com/br/files/2012/09/banner_c1.jpg" alt="Sapatênis"></a>
        
 </li>
    

    </ul>

      </section>

CSS

.feat-products ul li {
display: inline-block;
margin-left: 15px;
float: left;
    position: relative;
}
.feat-products .shop-now{
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
}
.feat-products .shop-now .circle{
    width: 150px;
    height: 150px;
    background: rgba(0,0,0,0.8);
    border-radius: 100%;
    position: absolute;
    top: 18px;
    left: 200px;
}
.feat-products .shop-now .circle span{
    display: block;
    width: 50px;
    color: white;
    font: bold 100% Arial, sans-serif;
    margin: 50px auto;
    text-align: center;
}
.feat-products ul li a:hover .shop-now {
    display: block;
}

JavaScript

$('section.feat-products ul li').find('a').hover(function() {
    $('div.circle').stop().animate({
        "left": "78px"
    }, 300);
}, function() {
    $('div.circle').css('left', '200px');
});