JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<div class="img-desc">
    <img src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg" alt=""  id="agua"/>
    <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS

.img-desc {
    position: relative;
    display: block;
    height:335px;
    width: 575px;
    filter: alpha(opacity=90);
}
.img-desc cite {
    background: #111;
    opacity:.55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 555px;
    padding: 10px;
    border-top: 1px solid #999;
    
}
#agua{
     opacity: 0.2;
}
}