<div class="kapsayici">
  <div class="resim-kabi">
      <img src="https://fatihhayrioglu.com/images/avatar-the-last-airbender.png" alt="">
  </div>
</div>
.kapsayici {
  overflow: hidden;
  padding-block-start: 4rem;
  border-radius: 0 0 9999px 9999px;
  transform: scale(var(--scale));
  transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 50% calc(50% + 4rem);
  will-change: transform;
}

.resim-kabi {
  display: grid;
  place-content: center;
  border-radius: 9999px;
  width: 280px;
  height: 280px;
  background: linear-gradient(to right, rgb(61, 126, 170), rgb(255, 228, 122));
  box-shadow: inset 0 -2px 0 1px #0001;
}

.kapsayici img {
  justify-self: center;
  width: 125%;
  max-width: none;
  object-fit: cover;
  transform: translateY(var(--translateY, 5%));
  transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  filter: var(--ds);
  will-change: transform, filter;
}

.kapsayici:hover {
  --scale: 1.15;
  --translateY: -4%;
  --ds: drop-shadow(2px 5px 5px #0004);
}

























* {
  margin: 0;
  padding: 0;
  outline: 0;
}

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  margin-top: 70px;
}
// resim kaynağı : https://www.popcultcha.com.au/avatar-the-last-airbender-aang-nendoroid-4-action-figure.html

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.