JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="poloroid">
    <img class="image" src="http://placehold.it/200x150" />
        <div class="overlay">
        <h2>Ballon Girl</h2>
        <h3><b>400 x 300 </b>(1200000 pixels)</h3>
        <h4>November 2010</h4>
        </div>
    </div>
    <div class="poloroid">
        <img class="image" src="http://placehold.it/200x150" />
        <div class="overlay">
        <h2>Ballon Girl 2</h2>
        <h3><b>400 x 300 </b>(1200000 pixels)</h3>
        <h4>November 2010</h4>
        </div>
    </div>

CSS

.poloroid
    {
        position: relative;
        border: 1px solid #E5E5E5;
        width: 220px;
        height: 190px;
        display: block;
        float:left;
        margin-right:10px;
        background-color:#fff;
    }
    .image
    {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .overlay
    {
        position:absolute;
        top: 10px;
        left: 10px;
        width:200px;
        height:150px;
        background-color:#E5E5E5;
        z-index:1;      
        
    }
    .overlay h2
    {
        color:#ea4c88;
        font-size:16px;
        font-weight:bold;
        font-family:Arial;
        margin:0px;
        margin-left:10px;
        margin-top:10px; 
        margin-bottom:5px;       
        line-height:17px;
    }
    .overlay h3
    {
        color:#898989;
        font-size:10px;
        font-family:Arial;
        margin:0px;
        margin-left:10px;
    }
    .overlay h4
    {
        position:absolute;
        bottom:10px;
        color:#898989;
        font-size:10px;
        font-family:Arial;
        margin:0px;
        margin-left:10px;
    }

JavaScript

$(document).ready(function () {
    setUp();
});   

function setUp() 
{
    $('.overlay').hide();
    
    $('.image').mouseenter(function (e) {
        $(e.srcElement).parent().find('.overlay').fadeTo(300, 0.95);
    });

    $('.overlay').mouseleave(function (e) {
        $(e.srcElement).parent().find('.overlay').fadeOut();
    });
}