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