JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" defer></script>
<script type="text/template" id="ImageTemplate">
    <div class='square-content'>
        <div class="square-box">
            <div class="text_holder_3">
                <img class="lazy centered" data-original="{0}" />
            </div>
            <div class="text_holder_2">
                <span>{1}</span>
            </div>
        </div>
    </div>
</script>

<header>
    <div class="navbar navbar-fixed-top menu">
        <input type="text" class="col-xs-8 col-sm-4 pull-left" placeholder="Search images" name="q">
        <a id="seourl" class="btn btn-info col-xs-3 col-sm-2 pull-right" type="submit">Share ...</a>
    </div>
</header>
  
<div id="container" class="row"></div>

CSS

.navbar {
   background:rgba(255,255,255,0.3);   /* for latest browsers */

}
body{
    background: url(http://i.imgur.com/TGU0BR9.jpg) no-repeat;
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
}

.max {
    display:block;
    max-width: 100%;
    max-height: 100%;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.square-content{
    float:left;
     display:block;
        margin:5px;
}
.square-box{
    position:relative;
    overflow:hidden;
    background: rgba(200, 54, 54, 0.5);

}
.text_holder_2 {
    background: black;
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    clear: both;
    display: none;
    text-align: center;
}
.text_holder_2 span{
    display: inline-block;
    color:white;
    margin:10px;
}
.square-content:hover .text_holder_2{
    display: block;
}

* {
    font-family:arial;
    margin:0;
    padding:0;
}

 .menu {
    padding:10px;
    color:#fff;
    height:50px;
    line-height:30px;
    letter-spacing:1px;
    width:100%;
}
#container{
    padding-top:52px;
}

JavaScript

$(function () {
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
            return typeof args[number] != 'undefined' ? args[number] : match;
        });
    };
    String.prototype.sanitize = function () {
        var entityMap = {
            "&": "&amp;",
                "<": "&lt;",
                ">": "&gt;",
                '"': '&quot;',
                "'": '&#39;',
                "/": '&#x2F;'
        };
        return String(this).replace(/[&<>"'\/]/g, function (s) {
            return entityMap[s];
        });
    };
    var container = $("#container");
    container.html("");
    var k = [{
        "Title": "coffee beans",
            "ImageUrl": "http://farm1.staticflickr.com/564/22052349891_ef3b579a7a_b.jpg"
    }, {
        "Title": "Batu Malang Indonesia",
            "ImageUrl": "http://farm6.staticflickr.com/5626/22047528391_556214761a_b.jpg"
    }, {
        "Title": "Gresik Harbour",
            "ImageUrl": "http://farm6.staticflickr.com/5810/21849718799_6f7c9bebc7_b.jpg"
    }, {
        "Title": "Child",
            "ImageUrl": "http://farm1.staticflickr.com/586/21413217324_c5465c6917_b.jpg"
    }, {
        "Title": "Minimal Surabaya",
            "ImageUrl": "http://farm1.staticflickr.com/749/22045827371_416171f56a_b.jpg"
    }, {
        "Title": "Minimal Surabaya",
            "ImageUrl": "http://farm1.staticflickr.com/654/22045827241_507e5e0d9e_b.jpg"
    }, {
        "Title": "Minimal Surabaya",
            "ImageUrl": "http://farm6.staticflickr.com/5818/22045827311_56f872d057_b.jpg"
    }, {
        "Title": "Plum, Java sparrow and blue-and-white flycatcher",
            "ImageUrl": "http://farm1.staticflickr.com/766/22035898085_a690f419e1_b.jpg"
    }, {
        "Title": "Minimal Surabaya",
            "ImageUrl": "http://farm1.staticflickr.com/695/22045827331_85bc414810_b.jpg"
    }, {
        "Title": "1645. Cafe Batavia",
           ...