• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

efekt hover po najechaniu na box

Aruba Cloud - Virtual Private Server VPS
+1 głos
288 wizyt
pytanie zadane 23 października 2023 w HTML i CSS przez new_user Użytkownik (640 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ź

+1 głos
odpowiedź 23 października 2023 przez VBService Ekspert (256,600 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 (640 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 (256,600 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 (640 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 (256,600 p.)

@new_user,  wink

[ 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;
}

 

1
komentarz 26 października 2023 przez new_user Użytkownik (640 p.)
dzięki o to chodziło

Podobne pytania

0 głosów
1 odpowiedź 307 wizyt
pytanie zadane 16 maja 2021 w HTML i CSS przez Tetsu99 Nowicjusz (200 p.)
0 głosów
1 odpowiedź 310 wizyt
0 głosów
1 odpowiedź 352 wizyt

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...