Увеличить проблему перекрытия изображения при наведении (преобразование CSS: масштабирование)

Я изо всех сил пытался создать страницу, на которой я могу отображать несколько изображений, которые при наведении увеличиваются примерно на 80% ширины страницы. Для этого, основываясь на ответах на другие вопросы здесь, я использовал transform: scale (). Проблема, с которой я сталкиваюсь, заключается в том, что это приводит к перекрытию изображений при увеличении. Чего я надеюсь добиться, так это того, что изображения будут толкать друг друга вниз по странице при увеличении, а не переходить сверху или снизу.

Пожалуйста, извините мою беспорядочную попытку решить эту проблему. Кодирование в целом очень ново для меня.

https://jsfiddle.net/msandford/zjrc7v6s/

.image1 { `display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image1:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}

Заранее спасибо.


css hover scaletransform image-enlarge
person Michael Sandford    schedule 12.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Функция scale() сохраняет ограничивающую рамку исходного элемента, таким образом, не сталкивая другие изображения, я мог бы поиграть с добавлением поля (сверху и снизу), но тогда изображение прыгает, поэтому я решил просто использовать свойство width (почему бы и нет? ? какой был ваш первоначальный вопрос, который привел к scale()?)

#scale {
  text-align: center; /* to align all inline content inside the div */
}

#scale img {
  width: 150px;
  transition: 0.4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

#scale img:hover {
  width: 80%;
}
<div id="scale">
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg">
</div>

Также я думаю, что должен указать, что вы неправильно использовали классы.

class — это строка, которую вы применяете ко всем изображениям, а затем вы можете сделать .scalethis{} в css, чтобы применить ее ко всем вашим изображениям одновременно.

То, как вы использовали это, было похоже на то, как вы должны использовать id

person Sam Apostel    schedule 12.08.2017