Flex wrap hover CSS issues. Hover making .li go wild - html

Question

Have a flex list which I've manged to get on a 4x4 row, as I have a total of 16 locations to add.
https://codepen.io/SteveGWR/pen/NaZJyp
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="destination-title">Bath</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
Problem is when you hover it goes wild.
Anything i'm missing in the CSS to solve this?

Answer 1

Try using scale instead of changing the width. This will not affect the other elements. Make the CSS of .grid-list li:hover like this :
.grid-list li:hover {
position:relative;
transform: scaleX(1.5);
max-width: 380px;
height: 150%;
z-index: 99;
overflow: auto;
}

Answer 2

As it is the flex-wrap: wrap that makes them go wild, group them 4 by 4 and remove wrapping.
I also added a z-index so the hovered item stays on top.
Updated codepen
Stack snippet
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.container {
position: absolute;
left: 50%;
margin-left: -475px;
background: #FF4346;
max-width: 950px;
width: 100%;
top: 10px;
height: 748px;
}
.grid-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
height: 230px;
}
.col {
flex: 1;
}
.grid-list .col {
width: 32%;
}
.grid-list li {
position:relative;
height:100%;
}
.destination-copy {
display:none;
opacity:0;
transition:1s all;
position:absolute;
bottom:0px;
width:100%;
background:rgba(0,0,0,0.7);
color:#fff;
padding:12px;
font-size: 13px;
font-family: arial;
}
.grid-list li:hover .destination-copy {
animation: 1s ease 0s normal forwards 1 fadein;
display:block;
}
#keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
.grid-list li {
transition: width 0.5s, height 0.5s;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 25%; /*CHANGE*/
/* min-width: 237px; */
/* margin: 1em; */
/* flex-wrap: wrap; */
list-style: none;
}
.grid-list li:hover {
width:200%;
height:150%;
z-index: 10;
}
.destination-title {
position:absolute;
bottom:80px;
right:0px;
background-color:#054940;
color:#fff;
font-size:16px;
padding:6px;
width: 100px;
text-align: center;
}
/* Background images */
.bath {
background-image:url(http://placekitten.com/600/350);
}
.bath:hover {
background-image: url(http://placekitten.com/600/350);
}
.bristol {
background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
background-image: url(http://placekitten.com/600/355);
}
.cardiff {
background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
background-image:url(http://placekitten.com/600/356);
}
.cornwall {
background-image:url(http://placekitten.com/600/357);
clear: right;
}
.cornwall:hover {
background-image:url(http://placekitten.com/600/357);
}
.dorset {
background-image:url(http://placekitten.com/600/359);
clear: left;
}
.dorset:hover {
background-image:url(http://placekitten.com/600/359);
}
.Cotswolds {
background-image:url(http://placekitten.com/600/365);
clear: left;
}
.Cotswolds:hover {
background-image:url(http://placekitten.com/600/365);
}
.Exeter {
background-image:url(http://placekitten.com/600/366);
clear: left;
}
.Exeter:hover {
background-image:url(http://placekitten.com/600/366);
}
.London {
background-image:url(http://placekitten.com/600/367);
clear: left;
}
.London:hover {
background-image:url(http://placekitten.com/600/367);
}
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="destination-title">Bath</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
<ul class="grid-list">
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
Updated based on a comment, where the row below won't be pushed down when resize the image.
By moving the height: 190px from .grid-list to .grid-list li, and then change the .grid-list li:hover to height: 270px; (150% of 190px), the row below will move down
Note, the codepen here is somewhat updated compared to the original.
Updated codepen 2