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

Rozszerzenie diva w LEWO po najechaniu kursorem

VPS Starter Arubacloud
0 głosów
419 wizyt
pytanie zadane 27 maja 2019 w HTML i CSS przez jupikajej Początkujący (440 p.)

Witam,

załóżmy że mam diva który jest przy prawej krawędzi strony i chciałbym aby po najechaniu na niego rozszerzał się do konkretnych rozmiarów i co najważniejsze w lewą stronę (konkretnie to w lewy dół ). Teraz mam że powiększa się ale w prawo

.div
{
    width: 490px;
    height: 290px;
    margin: 10px;
    background-color: #black;
    color: white;
}

.div:hover
{
    width: 1000px;
    height: 600px;
}

mógłby ktoś nakierować jak to zrobić ? 

1 odpowiedź

0 głosów
odpowiedź 28 maja 2019 przez cz3ran Stary wyjadacz (13,380 p.)

Oczywiście, potrzebujesz kontenera rodzica (w dalszej części parent), oraz dziecka (child):
 

<div class="parent">
  <div class="child"></div>
</div>

elementowi parent nadajesz docelową wielkość rozszerzającego się kontenera oraz nadajesz mu display flex, ustawiając elementy w środku na końcu (justify-content: flex-end; align-items: flex-end):

.parrent {
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
  width: 400px;
  height: 400px;
}

następnie ustawiasz inicjalnie dla elementu dziecka jakąś mniejszą wysokość i szerokość, a na hover nadajesz mu takie wielkości jak dla elementu rodzica:

 

.child {
  width: 200px;
  height: 200px;
  background: red;
  transition: width .5s ease-in-out, height .5s ease-in-out;
}

.child:hover {
  width: 400px;
  height: 400px;
}

Tym o to sposobem uzyskasz porządany efekt ;)

Podobne pytania

0 głosów
3 odpowiedzi 1,136 wizyt
0 głosów
2 odpowiedzi 578 wizyt
0 głosów
3 odpowiedzi 2,780 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 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!

...