efekt hover po najechaniu na box

pytanie zadane 23 października 2023 w HTML i CSS przez new_user Użytkownik (610 p.)

Witam, próbuje zrobić taki efekt hover że jeśli użytkownik najedzie na box to na obrazek nachodzi biała przestrzeń ale obrazek zostaje w miejscu lecz ma dalej border u góry, udało mi się uzyskać taki efekt lecz brzydko to wygląda bo następuje skok, można aki efekt uzyskać taki efekt z ładnym przesunięciem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box {
            height: 289px;
            width: 300px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: flex-end;
            border-radius: 48px;
        }
        .box:hover .box__img{
            height: 200px;
        }
        .box:hover .box__img img{
            object-position: 0 -98px;
        }
        .box__heading {
            color: red;
            font-size: 19px;
            font-weight: 600;
            letter-spacing: 0.01em;

            z-index: 2;
            position: absolute;
            top: 40px;
            left: 35px;
            line-height: 23px;
        }
        .box__img {
            height: 100%;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 48px;
            transition: .3s;
        }
        img {
            height: 289px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="" class="box">
            <div class="box__heading">animals</div>
            <div class="box__img">
                <img src="./animal-8318650_960_720.jpg" alt="">
            </div>
        </a>
    </div>
</body>
</html>

1 odpowiedź

odpowiedź 23 października 2023 przez VBService Ekspert (253,420 p.)

Użyj np. transform: translateY() na .box:hover .box__img

[ cały kod on-line ]

.box:hover .box__img {
  height: 200px;
  transform: translateY(10%);
}

...

.box__img {
  ...
  transition: all .3s;
}

komentarz 23 października 2023 przez new_user Użytkownik (610 p.)

chciał bym aby obrazek się nie obniżał tylko pozostał na swoim miejscu, a biała część najechała z góry jak na obrazu z prawej strony pokazałem.

komentarz 23 października 2023 przez VBService Ekspert (253,420 p.)

np. przez dodanie dodatkowej warstwy (div) między .box__heading a .box__img

[ cały kod on-line ]

<div class="box__heading">animals</div>
<div class="box__white-background"></div>
<div class="box__img">
  <img src="./animal-8318650_960_720.jpg" alt="">
</div>

.box__white-background {
  position: absolute;        
  top: -100%;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: white;
  transition: transform .3s;
}
.box:hover .box__white-background {
  transform: translateY(30%);
}

komentarz 23 października 2023 przez new_user Użytkownik (610 p.)

chodzi o taki wygląd obrazka po najechaniu, a w tym rozwiązaniu nie ma border-radius który mnie interesuje

komentarz 23 października 2023 przez VBService Ekspert (253,420 p.)

@new_user,

[ cały kod on-line ]

.box:hover .box__white-background,
.box:hover .box__img {
  transform: translateY(30%);
}
.box:hover .box__img img {
  transform: translateY(-30%);
}

...

img {
  display: block;
  ...
  transition: all .3s;
}