JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<div class="wrapper">
    <a href="test.html"> <img height=240 width=320 src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYm7nE5wc8NLS4tY4zzx-kamyn656ziK8Ma9fnmZLDASZS6oya4g"></a>
    <div class='description'>
        <p class='description_content'>This is the description of the image</p> 
    </div>
</div>

<div class="wrapper">
    <a href="test.html"> <img height=240 width=320 src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYm7nE5wc8NLS4tY4zzx-kamyn656ziK8Ma9fnmZLDASZS6oya4g"></a>
    <div class='description'>
        <p class='description_content'>This is a multi line description of the image. abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> 
    </div>
</div>

CSS

div.wrapper{
    float:left; /* important */
    display: table;
    width: 320px;
    height: 240px;
}
div.wrapper img {
    position: absolute;   
    z-index: -100;        
}

div.description{
    display: table-cell;
    vertical-align: middle; /* to vertically center */
    text-align: center; /* to horizontally center */
}
p.description_content{
    color: white;
    background: grey;
}