JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="poloroid">
    <img class="image" src="http://www.thebeebs.co.uk/demos/dribbble/images/ballon.png" />
    <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://www.thebeebs.co.uk/demos/dribbble/images/ballon2.png" />
    <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() {
    $('.overlay').hide();
    $('.image').mouseenter(function(e) {
        $(this).parent().find('.overlay').fadeTo(300, 0.95);
    });

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