JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="SIC">
    <a href="http://photoshopmesta.net/sic/theTest/sic/images/beach_aksoy.jpg" rel="" class="links">
        <span class="caption  slide just-show ">
            <span class="overlay"></span>
            <span class="caption-iwrap">
                <span class="caption-padding">
                Most basic. Not in a Most basic. Not in a Most basic. Not in a Most basic. Not in a group            Most basic. Not in a Most basic. Not in a Most basic. Not in a group
                </span>
            </span>
        </span>
        <img src="http://photoshopmesta.net/sic/theTest/sic/thumbs/beach_aksoy.jpg" class="simg">
    </a>
</div>

CSS

/*
 * SIC - Simple Image Caption v.1.2.1 -  Copyright (c) 2011 Joonas Pääkkö & Anurag Bhandari

 * Website: www.photoshopmesta.net/sic
 * HTML / CSS / JavaScript: Joonas ( www.photoshopmesta.net )
 * JavaScript: Anurag ( www.anuragbhandari.com )

 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
*/
/* SIC main css */


/*
*:first-child+html .SIC { overflow: visible; } * html .SIC { overflow: visible; } *//* The css hack that fixed ie7 image cutting - default value for other browsers is 
overflow: hidden; */


/*
    TBF - To Be Fixed.
    Still needs a lot of cleaning.
*/

.SIC, .SIC img {  float: left; }

.SIC { display: none; position: relative; overflow: hidden; text-align: left; font-size: 11px; font-family: Arial, Verdana; border: 1px solid #222222; margin: 2px; }

.SIC .caption { display: none; bottom: 0px; margin: 10px 0px 0px 0px; float: left; left: 0px; position: absolute; width: 100%; color: #ffffff; }

.SIC .caption-padding { margin: 0px; padding: 7px; float: left; font-weight: bold; clear: both; }
.SIC .no-padding { padding: 0px; }

.SIC .auto { width: auto; height: auto; }


.SIC .open { background: #444444 url(magnify.png) no-repeat center right; text-decoration: none !important; color: #ffffff !important; float: left; margin: 0px 8px 4px 8px; clear: both; padding: 7px 29px 7px 7px; line-height: 16px; position: relative; left: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }
.SIC .blue .open, .SIC .green .open, .SIC .orange .open, .SIC .pink .open, .SIC .red .open, .SIC .yellow .open, .SIC .dark-blue .open, .SIC .wine-red .open, .SIC .dark-green .open, .SIC .dark-green .open, .SIC .dark-red .open, .SIC .brown .open, .SIC .purple .open, .SIC...

JavaScript

$('.SIC').each(function() {
        var SIC    = $(this);        
            SIC.find('.overlay').css({ 
                opacity: '0.6',                
                background: '#005599'
            });
    
        
        // Wait till images load.

        var SICimg = SIC.find("img");
        SICimg.load( function(){

            SIC.css({ height: SIC.height(), width: SIC.width() });
 
            SIC.delay(500).fadeIn(700);

        });    
        
    });