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

Css hover - jak to zrobić

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
+2 głosów
162 wizyt
pytanie zadane 25 listopada 2022 w HTML i CSS przez MacieKap Obywatel (1,970 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 Początkujący (460 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 (583,180 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 Obywatel (1,970 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 (583,180 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 Obywatel (1,970 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 Obywatel (1,970 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 (583,180 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 Obywatel (1,970 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 (218,890 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 Obywatel (1,970 p.)
edycja 27 listopada 2022 przez MacieKap
Dlaczego taki zapis jak na filmie u mnie nie działa?
komentarz 27 listopada 2022 przez MacieKap Obywatel (1,970 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 (218,890 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ź 103 wizyt
pytanie zadane 23 listopada 2022 w HTML i CSS przez MacieKap Obywatel (1,970 p.)
0 głosów
1 odpowiedź 71 wizyt
pytanie zadane 21 listopada 2022 w HTML i CSS przez MacieKap Obywatel (1,970 p.)
0 głosów
1 odpowiedź 41 wizyt
pytanie zadane 28 stycznia w HTML i CSS przez DamiNo Nowicjusz (120 p.)

90,405 zapytań

139,021 odpowiedzi

311,538 komentarzy

60,085 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...