Как сделать так, чтобы при увеличении изображения не появлялась полоса прокрутки?

235

28 сентября 2018, 16:40

Есть галерея картинок, которые при наведении увеличиваются в размерах. Как сделать так, чтобы картинки продолжали увеличиваться точно также, может только более плавно (заезжали на соседние элементы включая верхние и нижние полосы), но при этом не появлялась горизонтальная полоса прокрутки на последнем элементе?

Код: фидл

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>

Answer 1

Вот пример с 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>