JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<script src="http://fonts.googleapis.com/css?family=Droid+Serif"></script>
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300italic"></script>
<img 
    src="https://placeimg.com/160/300/any" 
    alt="" 
    class="hover-card"
    data-icon=""
    data-title="title test"
    data-caption="Lorem ipsum dolor sit amet"
>
    
<img src="https://placeimg.com/160/300/architechture" alt="" class="hover-card">
<img src="https://placeimg.com/160/300/nature" alt="" class="hover-card">

CSS

.hover-card-wrap {
    border: 1px solid red;
    display: inline-block;
    position: relative;
}

.hover-card-wrap img {
    display: block;
}

.hover-card-overlay {
    background: #000;
    opacity: 0.6;
    
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.hover-card-icon,
.hover-card-title,
.hover-card-caption{
    z-index: 2;
    position: relative;
}

.hover-card-title {
    color: #fff;
    font-family: 'Droid Serif', serif;
    font-size: 20px;
}

JavaScript

$('.hover-card').each(function(){

    var _this = $(this),
        _thisD = _this.data();
    
    _this.wrap('<div class="hover-card-wrap" />');
    $('<div class="hover-card-overlay" />').insertAfter( _this );
    
    $('<div class="hover-card-content">'+
        ( _thisD.icon != undefined && $('<div class="hover-card-icon">'+ _thisD.icon +'</div>')  ) + 
        '<div class="hover-card-caption">' +
            ( _thisD.title != undefined ? ( '<div class="hover-card-title">'+ _thisD.title +'</div>' ) : '' ) +
            ( _thisD.caption != undefined ? ( '<div class="hover-card-caption">'+ _thisD.caption +'</div>' ) : '' ) +
        '</div>' +
    '</div>').insertAfter( _this );
    
});

function isset( d  ) { return d != undefined ? true : false; };