styel.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  margin: 0;
  min-height: 100vh;
  background: rebeccapurple;
}
/* .carosule {
  height: 408px;
  width: 508px;
  overflow: hidden;
  box-shadow: 2px 2px 2px rebeccapurple;
}
.image_container {
  display: flex;
  transition: all 0.3s linear;
  transform: translateX(0);
}
img {
  width: 500px;
  object-fit: cover;
  height: 500px;
} */

/*  heart rain*/
/* .heart{
  position: fixed;
  top: -5vh;
  transform: translateY(0);
  animation: rain linear 1s;
}

@keyframes rain{
  to{
    transform: translateY(105vh);
  }
} */

/* zoom effect */

.container{
  width:400px;
  height:400px;
  overflow: hidden;
}

img{
  box-shadow: 3px 3px 3px 7px rgb(3, 54, 112);
  transform-origin:center center;
  width:100%;
  height:100%;
  object-fit: cover;
 
}