JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script src="http://tarnic.com/wip/shadowbox-3.0.3/shadowbox.js"></script>
<link rel="stylesheet" href="http://tarnic.com/wip/shadowbox-3.0.3/shadowbox.css">
        <ul>
            <li class="block"><a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo"><span>Content</span></a></li>
            <li class="block"><a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo"><span>Content</span></a></li>
            <li class="block"><a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo"><span>Content</span></a></li>
            <li class="block"><a rel="shadowbox;height=600;width=800" href="http://tarnic.com"  class="bInfo"><span>Content</span></a></li>
        </ul>

CSS

.block a{
    width:190px;
    height:190px;
    margin:15px;
    background-color:#333;
    float:left;
    clear:none;
    opacity: 0.50;
    display:block;
    border: 2px solid #609fef;
    position: relative;
    text-decoration:none;
    color:#FFFFFF;
}
.block a:hover{
    box-shadow: 0px 0px 8px #666666;
}
.block span{
    background-image: url(http://tarnic.com/wip/images/block_bg.png);
    display: block;
    height: 0px;
    overflow:hidden;
    width: 190px;
    margin-top: 120px;
    position: absolute;
    bottom: 0px;
}

JavaScript

$('.block a').hover(
        function(){ 
            $(this).stop().animate({opacity: 1}, 200); 
            jQuery("span", this).stop().animate( {height:50}, 230, 'swing'); 
        },
        function(){ 
            $(this).stop().animate({opacity: .50}, 200);
            jQuery("span", this).stop().animate( {height:0}, 230, 'swing'); 
        }
    );


Shadowbox.init();