JSFiddle - React, Tailwind, and code Playground

HTML

<div class="h_grid_2">
      <div class="hb_grd_2_wr">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan</div>
      <div class="gradient_c_grd_2 "></div>
      <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xpa1/t31.0-8/10514161_890881767606796_8620569540977604869_o.jpg" >
    </div>

CSS

.h_grid_2{
  float:left;
  width:384px;
  height:200px;
  margin-bottom:5px;
  -webkit-transition: all .3s ;
		-moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
		transition: all .3s ;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
  overflow:hidden;
  
}
.h_grid_2 img {
  width:100%; 
  -webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
  -webkit-backface-visibility: hidden;
  
}
.h_grid_2:hover img {
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
.hb_grd_2_wr{
  float:left;
  width:379px;
  height:auto;
  position:absolute;
  text-indent:5px;
  padding-left:5px;
  padding-right:5px;
  margin-top:150px;
  z-index:5;
  font-size:15px;
  line-height:25px;
  color:#fff;
  font-weight:bold;
  font-family: 'Droid Serif', Georgia, Times, serif;
  text-shadow: 1px 1px 4px rgba(44, 44, 44, 1);
}
.h_grid_2 .gradient_c_grd_2 {
    position:absolute;
    width:384px;
    height:200px;
    z-index:1;
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    -webkit-transition: 1s all;
    transition: 1s all;
}
.h_grid_2:hover .gradient_c_grd_2 {
    position:absolute;
    width:384px;
    height:200px;
    z-index:1;
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255 255, 255, 0.2));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0, 0), rgba(255, 255, 255, 0.2));
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
   ...