JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main">
    <li class="work" data-gallery-items="17" data-gallery-id="1" data-gallery-start="0">
        <div class="img">in my code theres an img tag here</div>
        <div class="work-info">
            <h2>title</h2>
            <div>info</div>
        </div>
        <div class="work-further"></div>
    </li>
</ul>

CSS

.work {
    width:180px;
    height:225px;
    float:left;
    margin-left:12px;
    margin-bottom:12px;
    overflow:hidden;
    background-color: #737373;
    position:relative;
    text-shadow:0px 0px 2px rgba(0, 0, 0, .7);
}
.work > .img {
    position:absolute;
    z-index:1;
    height:225px;
    width:auto;
    box-shadow:0 0 5px rgba(0, 0, 0, .7);
    background-color:#ca7373;
    
    -moz-transition:top 180ms;
    -webkit-transition:top 180ms;
    -o-transition:top 180ms;
    transition:top 180ms;
}
.work:hover > .img {
    top:-42px;
}