There is a gallery of pictures that increase in size when hovering. How to make the pictures continue to increase in the same way, can only more smoothly (drove to the neighboring elements including the upper and lower bars ), but at the same time the horizontal scroll bar did not appear on the last element?

Code: Fidl

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>

  • @Gennady Zhurov tried, but not that - I specifically prescribed (highlighted in bold, so that it was noticeable) that the pictures should fit on the top and bottom strip. overflow-x and overflow-y don't save either - Vasya

1 answer 1

Here is an example with transform-origin

 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: block; background-size: cover; background-position:center; background-repeat:no-repeat; width: 20%; height: 150px; transform: translateZ(0); } .photo:hover { transform: translateZ(0) scale(1.1); transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; } .photo:last-child { transform-origin: right center; } #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>

  • Yes thank you! And with the smooth appearance of the picture (without artifacts on the sides) can you do something? - John
  • one
    I saw one trick here with translateZ(0) ru.stackoverflow.com/a/849712/275019 , it seems to remove it from the larger one. The answer is updated. - jhurof