JSFiddle - React, Tailwind, and code Playground

by cyber cyber

HTML

<div class="gallery-work">
        <img src="https://lh3.googleusercontent.com/-s5GLpIZE_hA/Usl13KpTc8I/AAAAAAAAAXQ/hM4P0GanEhM/w1223-h678-no/1.jpg" />
    <div class="description"> 
        <div> First Work </div> 
        <a href="#"> Full page </a>
    </div>
</div>

CSS

*{margin: 0; padding: 0;}

.gallery-work {
    width: 500px;
    height: 277px;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    overflow: hidden;
  
}

.gallery-work img {
    width: 100%;
    height: 100%;
    z-index: 100;
}

.gallery-work:hover .description{
    -webkit-transform: translateY(-100px);
}

.gallery-work .description{
    height: 100px;
    width: 100%;
   /*  text-align: center; */
    transition: .5s ease;
    background-color: rgba(44, 63, 82, 0.6);
    position: relative;
}
.gallery-work .description a {
    padding: 10px;
    background-color: #ed4e6e;
    color: white;
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-decoration: none;
    border-radius: 5px;
}

.gallery-work .description div {
    color: white;
    position:  relative;
    font-size: 20px;
    top: 20px;
    left: 20px;
}

</style>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"> </script>