JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div id="ultimate" class="ultimate">
    <div id="container" class="lbcontainer">
        <div class="lbwrap"> <a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
              <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 1"/>
          </a>

        </div>
        <div class="lbwrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
               <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 2"/>
          </a>

        </div>
        <div class="lbwrap 1"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
               <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 3"/>
			   <div class="over"><a href="http://www.w3schools.com/css/css_positioning.asp"></br><span>LINK 1</span></a>
            </br>
            </br><a href="http://smallbusiness.chron.com/stretch-image-horizontally-css-43652.html"><span>LINK 2</span></a>
        </div>
        </a>
    </div>
    <div class="lbwrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
               <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 4"/>
          </a>

    </div>
    <div class="lbwrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
               <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 5"/>
          </a>

    </div>
    <div class="lbwrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
               <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 6"/>
          </a>

    </div>
    <div class="lbwrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
               <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" alt="Picture 7"/>
          </a>

    </div>
    <div...

CSS

* {
    margin:0;
    padding:0;
}
.ultimate {
    position:absolute;
    width:600px;
    height:400px;
}
.lbcontainer {
    position:absolute;
    width:100%;
    height:100%;
}
.lbwrap {
    width:25%;
    height:50%;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.lbwrap a img {
    border:none;
    position:absolute;
    /* change these parameters to alter original size of image */
    top:-66.5px;
    left:-150px;
    height:400px;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.over {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 36px;
    text-align: center;
    color: yellow;
    background: rgba(64, 64, 64, 0.5);
    top: 0;
    left: 0;
    z-index:2;
    display: none;
}
span {
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    font-size:14px;
}

JavaScript

$('.lbwrap').hover(function () {
    $(this).find('.over').fadeIn();
}, function () {
    $(this).find('.over').fadeOut();
});

$(function () {
    //the size of the image when hovered over, originally 200/0/0
    $('.lbwrap').hover(
    function () {
        var $img = $(this).find("img");
        $img.stop().animate({
            'opacity': '1.0',
                'height': '500px',
                'top': '-66.5px',
                'left': '-150px'
        },
        //this following number defines speed of animation enlargement ( in ms)
        20);
    },

    function () {
        //the size of the image when left alone
         var $img = $(this).find("img");
        $img.stop().animate({
            'opacity': '0.5',
                'height': '400px',
                'top': '-66.5px',
                'left': '-150px'
        },
        //this following number defines speed of animation back to normal ( in ms)
        700);
    });
});