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

Css hover - jak to zrobić

VPS Starter Arubacloud
+2 głosów
454 wizyt
pytanie zadane 25 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
edycja 26 listopada 2022 przez MacieKap

Witam,

jak zrobić, żeby .photo-box poszerzał się, a sąsiadujące z nim zwężały?

Chciałbym uzyskać efekt jak na filmie (https://www.youtube.com/watch?v=IoCzObAXHm8&list=WL&index=10&t=357s).

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Foxes</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="logo">
        Foxes
        <button class="burger"><span class="burger-box">
            <span class="burger-line"></span>
        </span></button>
    </div>
    <div class="nav">
        <ul class="menu">
            <li class="button">Lis Polarny</li>
            <li class="button">Lis Rudy</li>
            <li class="button">Lis Pustynny</li>
        </ul>
    </div>
        <div class="photos">
            <div class="photo-box lis-polarny">
                <p>
                    Lis Polarny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-rudy">
                <p>
                    Lis Rudy
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-pustynny">
                <p>
                    Lis Pustynny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
        </div>
    <script src="script.js"></script>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
body{
    color: white;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
}
.logo{
    background-color: rgba(0, 0, 0, 0.25);
    width: 100vw;
    height: 56px;
    text-align: center;
    font-size: 45px;
    font-weight: 500;
    position: absolute;
    z-index: 9999;
}
.burger{
    position: absolute;
    left: 10px;
    top: 7px;
    background-color: transparent;
    border: transparent;
    display: inline-block;
    cursor: pointer;
}
.burger-box{
    width: 62px;
    height: 38px;
    position: relative;
    display: inline-block;
}
.burger-line{
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
    transition: background-color .3s;
}
.burger-line::before, .burger-line::after{
    content: '';
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
    transition: transform .3s linear;
}
.burger-line::before{
    top: -15px;
}
.burger-line::after{
    top: 18px;
}
.burger-active .burger-line{
    background-color: transparent;
}
.burger-active .burger-line::before{
    transform:  translateY(15px) rotate(45deg);
}
.burger-active .burger-line::after{
    transform: translateY(-18px) rotate(-45deg);
}
.nav{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.15);
    top: 56px;
    width: 100vw;
    height: 47px;
    left: 0;
    z-index: 1;
    transform: translateX(-100vw);
    transition: opacity .3s ease-in-out;
    opacity: 0;
    z-index: 9999;
}
.nav-active{
    opacity: 1;
    transform: translateX(0);
}
.menu{
    display: flex;
    list-style-type: none;
    height: 47px;
}
.button{
    font-size: 30px;
    font-weight: 500;
    flex-grow: 1;
    padding-top: 5px;
    text-align: center;
    height: 47px;
}
.button:not(:last-child){
    border-right: 3px solid white;
}
.photos{
    width: 100vw;
    height: 100vh;
    display: flex;
    padding: 0;
    margin: 0;
}
.photo-box{
    background-position: center;
    background-size: cover;
    font-weight: 300;
    font-size: 20px;
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: transform .3s ease-in-out;
    text-transform: uppercase;
    text-align: center;
}
.photo-box:hover{
    transform: scale(1.2);
    z-index: 9;
}
.photo-box p{
    z-index: 1;
}
.photo-box p::first-line{
    font-size: 22px;
}
.photo-box::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
}
.lis-rudy{
    background-image: url(img/rudy/lis1.jpg);
}
.lis-pustynny{
    background-image: url(img/fenek/fenek1.jpg);
}
.lis-polarny{
    background-image: url(img/polarny/polarny1.webp);
}

Z góry dziękuję za wszystkie odpowiedzi

3 odpowiedzi

+1 głos
odpowiedź 26 listopada 2022 przez Nitr0Skay Użytkownik (670 p.)
Wydaje mnie się, że wpływanie na sąsiednie elementy poprzez zdarzenia na innym, określonym elemencie będzie łatwiejsze do zaimplementowania poprzez JS.

Choć niewykluczone również, że znajdzie Pan odpowiedź w tym temacie:  https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling

I dopasuje ją Pan do swojego problemu
+1 głos
odpowiedź 26 listopada 2022 przez Comandeer Guru (599,730 p.)

To jest bardzo fajny case dla :has() i :not():

:has(.photo-box:hover) .photo-box:not(:hover) {
    transform: scale( 0.6 );
}
  1. Dzięki :has() pobieramy element, w którym znajduje się shoverowany .photo-box.
  2. Mając już ten element, pobieramy z niego przy pomocy :not() wszystkie .photo-box, które nie są hoverowane.

Jedyny minus: nie zadziała to na ten moment w Firefoksie, który wciąż nie dodał obsługi :has().

komentarz 26 listopada 2022 przez MacieKap Bywalec (2,400 p.)
Po co mam pobrać element w którym znajduje się photo-box?

Chciałbym, aby elementy poszerzały, a nie powiększały.
1
komentarz 26 listopada 2022 przez Comandeer Guru (599,730 p.)

Bo nie ma sposobu na pobranie wszystkich sąsiadów hoverowanego elementu, co najwyżej można pobrać tylko tych, którzy są za nim, tych przed się nie da. A pobranie rodzica pozwala to obejść.

Natomiast transform można zamienić na dowolną inną rzecz.

komentarz 26 listopada 2022 przez MacieKap Bywalec (2,400 p.)

czyli mógłbym napisać?

.photos .photo-box:hover .photo-box:not(:hover) {
    transform: scale( 0.6 );
}

 

1
komentarz 26 listopada 2022 przez MacieKap Bywalec (2,400 p.)

Chciałbym uzyskać efekt jak na filmie (https://www.youtube.com/watch?v=IoCzObAXHm8&list=WL&index=10&t=357s).

2
komentarz 26 listopada 2022 przez Comandeer Guru (599,730 p.)

czyli mógłbym napisać?

Nie, bo ten selektor oznacza "pobierz elementy .photo-box, które nie mają hovera i które są potomkami elementu .photo-box, który ma hovera i jest potomkiem elementu .photos", A takie elementy nie istnieją (nie masz zagnieżdżonych w sobie .photo-box).

Tam na tym filmie efekt jest uzyskany zupełnie w inny sposób – przy pomocy flex-growhttps://codepen.io/Comandeer/pen/wvXXKgN

Zmiana flex-grow z 1 na 3 przy :hover sprawia, że element po prostu zaczyna zajmować  więcej miejsca kosztem pozostałych. Animacja jest dodana przy pomocy transition.

1
komentarz 26 listopada 2022 przez MacieKap Bywalec (2,400 p.)

Taki zapis u mnie nie działa.

.photos{
    width: 100vw;
    height: 100vh;
    display: flex;
    padding: 0;
    margin: 0;
}
.photo-box{
    background-position: center;
    background-size: cover;
    font-weight: 300;
    font-size: 20px;
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    text-align: center;
}
.photo-box:hover{
    flex-grow: 3;
}
0 głosów
odpowiedź 26 listopada 2022 przez VBService Ekspert (251,210 p.)

Chciałbym uzyskać efekt jak na filmie (https://www.youtube.com/watch?v=IoCzObAXHm8&list=WL&index=10&t=357s).

zapoznaj się z CSS-accordion-flex

komentarz 27 listopada 2022 przez MacieKap Bywalec (2,400 p.)
edycja 27 listopada 2022 przez MacieKap
Dlaczego taki zapis jak na filmie u mnie nie działa?
komentarz 27 listopada 2022 przez MacieKap Bywalec (2,400 p.)

@VBService, Mógłbyś mi wytłumaczyć jak ma to ten skrypt https://codepen.io/kuladiamond/pen/KRwoKm .

 

komentarz 27 listopada 2022 przez VBService Ekspert (251,210 p.)

https://codepen.io/kuladiamond/pen/KRwoKm

To jest mniej, więcej odpowiednik Twojego kodu (do powyższego linku)

<div class="photos">
  
  <div class="photo-box lis-polarny">
    <div class="content">
      <p>
        Lis Polarny
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.
      </p>        
    </div>
  </div>
  <div class="photo-box lis-rudy">
    <div class="content">
      <p>
        Lis Rudy
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.
      </p> 
    </div>
  </div>
  <div class="photo-box lis-pustynny">
    <div class="content">
      <p>
        Lis Pustynny
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.
      </p> 
    </div>
  </div>

</div>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
.photos{
    display: flex;
    height: 300px;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
.photos .photo-box{
    display: flex;
    flex: 1 0 80px;
    overflow: hidden;    
    transition: flex .3s ease-in-out;    
}
.photo-box:hover{
    flex: 10;
}
.photo-box .content{
    flex: 0 0 400px;
}

.lis-polarny{
    background-color: #ef9a9a;
}
.lis-rudy{
    background-color: #ce93d8;
}
.lis-pustynny{
    background-color: #90caf9;
}

 

sprawdź sam, uproszczony (IMHO) do niezbędnego minimum.

Podobne pytania

+1 głos
1 odpowiedź 245 wizyt
pytanie zadane 23 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
0 głosów
1 odpowiedź 296 wizyt
pytanie zadane 21 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
0 głosów
1 odpowiedź 110 wizyt
pytanie zadane 28 stycznia 2023 w HTML i CSS przez DamiNo Nowicjusz (120 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...