WebTaverna /> js, css, html
Интересный эффект при наведение на карточки с помощью Flexbox CSS
HTML разметка
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Реализовывать данный эффект будем с помощь flex-grow. Зададим всем карточкам flex-grow со значением 1, а при наведение на конкретную карточку будем менять значение на 4.
flex-grow - это свойство, определяющие, какое количество свободного пространства флекс-контейнера может занимать текущий элемент.
CSS стили
.container {
display: flex;
width: 600px;
gap: 5px;
}
.container div {
background: lightblue;
width: 5rem;
height: 10rem;
flex-grow: 1;
transition: all 0.5s;
}
.container div:hover {
flex-grow: 4;
}
.container div:nth-child(odd) {
background: tomato;
}
👍- если было полезно | ➡️ WebTaverna
