JSFiddle - React, Tailwind, and code Playground

HTML

<section id="portfoliowrapper">
    <nav>
        <ul class="colum3">
            <li><a href="portfolio_detail.aspx" title="Title 1"><img src="/images/webraket_single_item.jpg" alt="webraket_single_item"  /></a></li>
            <li><a href="portfolio_detail.aspx" title="Title 2"><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item"  /></a></li>
            <li><a href="portfolio_detail.aspx" title="Title 3"><img src="/images/webraket_single_item.jpg" alt="webraket_single_item"  /></a></li>
            
        </ul>
    </nav><!-- //navcontainer -->
</section><!-- //portfoliowrapper-->

CSS

#portfoliowrapper { float: left;}
#portfoliowrapper nav .colum3 { float: left;}
#portfoliowrapper nav .colum3 a img { }
#portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right:    10px;margin-bottom: 10px; background: #555; }
#portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;}
/* Just for fiddle purposes */
#portfoliowrapper nav .colum3 a img { display: block; width: 253px;height: 220px; }

JavaScript

$(document).ready(function() {
    $('.colum3 li a').bind('mouseover', function() {

        $(this).parent('li').css({
            position: 'relative'
        });
        var img = $(this).children('img');
        var title = $(this).attr('title');
        $('<a />').attr('href', $(this).attr('href'))
            .html($('<div />').text(title).css({
            'color': '#FFF',
            'height': (img.height()),
            'width': img.width(),
            'background-color': '#000',
            'position': 'absolute',
            'bottom': 0,
            'left': 0,
            'opacity': 0.6
        }).bind('mouseout', function() {
            $(this).fadeOut('fast', function() {
                $(this).remove();
            });
        })).insertAfter(this).animate({
            'opacity': 0.6
        }, 'fast');

    });

});