Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery to utilize flex-wrap so that it breaks into the next row after reaching the 5th element.
I envision the functionality to work such that each row contains exactly 5 elements that expand and contract seamlessly on the same row. Once a sixth element is introduced, I'd like the layout to shift to the next row while maintaining the transitions intact.
- The elements are supposed to stretch to fill the available space (approximately 20% width for each of the 5 elements)
- -> Upon hover, the non-hovered elements should shrink by 5%, equating to a total of 20%
- The hovered element should enlarge to 40%
- For the sixth element transitioning to the next row, it must adjust its size proportionally
- The seventh element occupying 50% of the row, eighth taking up 33.3%...and so forth
You can view my current progress here: https://codepen.io/TommyBoyLab/pen/YdzGjB
(source inspiration: https://codepen.io/joliveras/pen/GpLVKv)
Here's the HTML structure of the element:
<div class="container">
<div class="item" style="background:url() center/cover">
And the corresponding CSS styling:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.container .item {
display: grid;
position: relative;
flex: 1;
transition: 500ms;
min-width: 15%;
max-width: 20%;
height: 50vh;
}
.container .item:hover {
transition: 500ms;
max-width: 40%;
flex-grow: 1;
}
.container .content {
margin: auto;
font-size: 1.5em;
}