JSFiddle - React, Tailwind, and code Playground

by Alok Kumar

HTML

<div class="campaign-box">
    <a href="#"class="like-box"> 
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            <span>34234983-80</span>
        </div>    
        <span> </span>
    </a>
</div>

CSS

.campaign-box {
    display: block;
    height: 100px;
    width: 200px;
    border: solid black;
}
.box {
    display:block;
    height:100%;
    width:100%;
    float:left;
}
.box + span {
    display: block;
    height:100%;
    width:100%;
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat;
    z-index:5;
}

JavaScript

$(function () {
    $(".campaign-box span:last").hide();
    $(".campaign-box").hover(function () { 
        $(".box").css("opacity", 0.5);
        $(".campaign-box span:last").fadeIn("fast");           
    }, function () {        
        $(".box").css("opacity", 1); 
        $(".campaign-box span:last").fadeOut("slow");
    });
});