Rozszerzenie diva w LEWO po najechaniu kursorem

Question

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ć ? 

Answer 1

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 ;)