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