<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.