JSFiddle - React, Tailwind, and code Playground

by mikea80

HTML

<a href="#" title="some link">
    <div id="image">
        <img src="http://www.w3schools.com/images/pulpit.jpg" />
        <div id="imagecaption">Some Link</div>
    </div>
</a>

CSS

a {
    text-decoration: none;
    border-bottom: 0;
}
#image {
    width:304px;
    height:228px;
    margin:0 auto;
    border:1px solid #000;
    overflow:hidden;
}
#imagecaption {
    clear:both;
    position: relative;
    display:block;
    width: 100%;
    height:45px;
    text-align: right;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.6);
    padding:10px 10px 0 0;
    color:white;
    margin:-45px 0 0 -10px;
    overflow:hidden;
}