0

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

Код: фидл

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>

1
  • @Геннадий Журов пробовал, но не то - я специально прописывал (выделил жирным, чтобы было заметнее), что картинки должны налезать на верхнюю и нижнюю полоску. overflow-x и overflow-y тоже не спасают
    – Вася
    26 июл 2018 в 9:41

1 ответ 1

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>

2
  • да, спасибо! А с плавностью появления картинки (без артефактов по бокам) можно что-нить сделать?
    – Вася
    26 июл 2018 в 10:20
  • 1
    Видел я тут один приём с translateZ(0) ru.stackoverflow.com/a/849712/275019 , вроде с большего убирает. Ответ обновил.
    – zhurof
    26 июл 2018 в 10:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.