flexgrow po najetí

by Petr Haluza

HTML

<div class="container">
  <div class="item">Nazdar</div>
  <div class="item">Nazdar</div>
  <div class="item">Nazdar</div>
  <div class="item">Nazdar</div>
  <div class="item">Nazdar</div>
</div>

CSS

body { background-color: black;}

.container { margin: 0 auto; width: 700px; height: 400px; border: 1px solid #1a1a1a; display: flex; align-items: center;}

.item { flex-grow: 1;  background-color: darkred; position: relative; 
padding: 1em; border: 1px solid #1a1a1a; transition: all .25s ease-in-out; }
.item:hover { flex-grow: 4; background-color: #f10000;}