JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="parent">
  <div id="text1">
    მაქციის მხილება
  </div>
  
  <div class="images">
    <img class="bidzo" src="https://scontent.ftbs1-1.fna.fbcdn.net/v/t1.0-9/10013041_900548206651712_7679170281904926980_n.jpg?_nc_cat=111&_nc_eui2=AeHWp9i0pXn6iwk-3cBBhK7mjqxZwtFSD3hNjwSoXz9Lb6LrsNEKCoKw2NZaXIElWb2KuckU6aovTfnrkpJfy7L9cYEWxdfKFZhAK8l9oICIKQ&_nc_ohc=Hei_gIGG4jUAQl-Qfz_33z9XkVOAWZCcLrLfD7XodvK1PIOZCSqjJy3dg&_nc_ht=scontent.ftbs1-1.fna&oh=1320fb680955e0d0eecd9a632ece9e59&oe=5E6739E0" alt="">  
     <img class="bidzo bidzo2" src="https://commersant.ge/views/commersant/img/news/20190408160421.jpg" alt=""> 
  </div>
  
  <div id="text2">
    მუტაცია ეწყება 7 შოტ იაგერში
  </div>
</div>

CSS

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: grey;
  height: 450px;
  flex-direction: column;
  
  
} 

.bidzo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  object-position: 0% 25%;
  
}

.bidzo2{
 object-position: 27% 30%;
 opacity: 0;
 transition: 2.5s;
 transform: scale(1.05)
 
 }
 
 .bidzo2:hover{
   opacity: 1;
 }
 
#text1{
  font-size: 35px;
  margin-bottom: 20px;
  color: orange;
}

#text2{
  font-size: 20px;
  margin-top: 20px;
  color: white;
}
.images{
  width: 300px;
  height: 300px;
  position: relative;
  background: red;
  overflow: hidden;
}