JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div class="slideryanbox">

<h1>Yemek Masasına Özel</h1>
<img src="https://mimarizihobi.com/img/cms/sub-banner-1.jpg" alt="" width="380px" />



</div>

CSS

.slideryanbox{
  width:280px;
  height:280px;
  overflow:hidden;
  background-color:red;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor:pointer;
  z-index:auto;
  position:relaitive;
}

.slideryanbox h1{ margin:0px; padding:0px;
width:140px; 
font-size:16px;
position:absolute;
left:24px; top:24px;
padding:6px;
background-color:rgba(255,255,255,0.3);
z-index:+1;
}
.slideryanbox img{ margin:0px; padding:0px;
width:280px; height:280px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  transform-origin: bottom center;
}

.slideryanbox:hover > img {
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }