JSFiddle - React, Tailwind, and code Playground

by akshatsrivastava

HTML

<section class="work">
    <figure class="logo">
        <a href="#">
            <img src="http://d3pr5r64n04s3o.cloudfront.net/articles/102_edge/preview.png" alt="" />
            <dl>
                <div class="top">
                    <dt>Client</dt>
                        <dd>Envato</dd>
                </div>
                <div class="bottom">
                    <dt>Role</dt>
                        <dd>Illustration</dd>
                </div>
            </dl>
        </a>    
    </figure>    
</section>

CSS

.work figure {
    display: inline; 
    float: left;
    cursor: default;
    margin: 20px;
    width: 200px;
    height: 200px;
    background: #9d2e2c; 
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    -webkit-filter: sepia(0.4);
}

.work figure div {
    position: absolute;
    height: 50%;
    background: rgba(0, 0, 0, 0.5);
}

.top {
    bottom: 100%;
}
.bottom {
    top: 100%;
}