JSFiddle - React, Tailwind, and code Playground

by niuuin

HTML

<body>
  <div class="imgbox">
    <img src="https://cdn.dribbble.com/users/642843/screenshots/5581187/26.jpg" alt="">
  </div>
</body>

</html>

CSS

.imgbox {
     width: 400px;
     height: 300px;
     position: relative;
     overflow: hidden;
   }

   .img {
     width: 100%;
   }

   .imgbox:after {
     position: absolute;
     left: 0;
     top: 0;
     display: block;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     content: attr(data-text);
     transition: all .1s ease;
     opacity: 0;
     color: #FFF;
   }

   .imgbox:hover:after {
     opacity: 1;
   }