Есть галерея картинок, которые при наведении увеличиваются в размерах. Как сделать так, чтобы картинки продолжали увеличиваться точно также, может только более плавно (заезжали на соседние элементы включая верхние и нижние полосы), но при этом не появлялась горизонтальная полоса прокрутки на последнем элементе?
Код: фидл
body {
margin:0;
}
.yellow {
background-color:yellow;
height:30px;
}
.red {
background-color:red;
height:30px;
}
#photos {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
}
.photo {
display: flex;
background-size: cover;
width: 20%;
height: 150px;
}
.photo:hover {
transform: scale(1.1);
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
}
#photo-1 {
background-image: url("http://via.placeholder.com/150x150");
}
#photo-2 {
background-image: url("http://via.placeholder.com/150x150");
}
#photo-3 {
background-image: url("http://via.placeholder.com/150x150");
}
#photo-4 {
background-image: url("http://via.placeholder.com/150x150");
}
#photo-5 {
background-image: url("http://via.placeholder.com/150x150");
}
<div class="yellow"></div>
<div id="photos">
<a class="photo" id="photo-1"></a>
<a class="photo" id="photo-2"></a>
<a class="photo" id="photo-3"></a>
<a class="photo" id="photo-4"></a>
<a class="photo" id="photo-5"></a>
</div>
<div class="red"></div>
overflow-x
иoverflow-y
тоже не спасают