JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<body>
    <ul>
        <li> <a href="http://en.wikipedia.org/wiki/Lotus_Temple" title="New Delhi Lotus">
                <img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Image-New_Delhi_Lotus.jpg" width="300" height="200" alt="New Delhi Lotus" />
            </a>

        </li>
    </ul>
</body>

CSS

ul {
    overflow: hidden;
    padding: 5px;
}
ul > li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 20px 20px 0;
    font-size: 10px;
}
ul a {
    text-decoration: none;
    display: block;
}
ul li img {
    display: block;
    position: relative;
    z-index: -1;
}
/* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
 ul li:not([class=na]) img {
    position: static;
}
/* Reset relative position, as this plays havoc with good browsers */
 ul a:hover, ul a:focus {
    display: block;
    outline: none;
    -moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
}
ul a:hover img, ul a:focus img {
    outline: 3px solid #ffe;
}
ul a:hover:after, ul a:focus:after {
    content: attr(title);
    color: #000;
    position: absolute;
    bottom: 0;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-weight: bold;
    font-size:30px;
    width: 100%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.7);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(204, 204, 204, 0.7));
    /* Firefox 3.6+ */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.7)), to(rgba(204, 204, 204, 0.7)));
    /* Safari */
    display: block;
    text-shadow: 1px 1px 1px #fff;
}