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

Question

[Stels007]

Коллеги, пожалуйста помогите! На сайте должна располагаться матрица из фотографий 3 на 3 и анимация, при наведении курсора на каждую из них, увеличивает слегка. Но при увеличении, увеличивающаяся картинка своими краями залезает на соседние. Как сделать, чтобы она как бы увеличивалась внутри?

<div id="conteiner">
  <div><img src="Images/1_1.jpg" class="kar1"></><img src="Images/2_2.jpg" class="kar1"></><img src="Images/3_3.jpg" class="kar1"></></div>
  <div><img src="Images/4_4.jpg" class="kar1"></><img src="Images/5_5.jpg" id="kar" class="kar1"></><img src="Images/6_6.jpg" class="kar1"></></div>
  <div><img src="Images/7_7.jpg" class="kar1"></><img src="Images/8_8.jpg" class="kar1"></><img src="Images/9_9.jpg" class="kar1"></></div>
</div>

#conteiner {
  position: absolute;
  margin: 25%;
  margin-top: 30px;
  flex-direction: row;
}

.kar1:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.kar1 {
  transition: all 1s ease-in-out;
}

Answer 1

[Андрей Федоров]

Господи, ну чего тут думать-то? Нужна обертка с overflow: hidden;

Comments

[Stels007]

Спасибо, что откликнулись) Пробовал с overflow: hidden, но не зашло. Скорее всего я не правильно ее применял. Не могли бы Вы подсказать как ее правильно использовать в данном случае?

[Андрей Федоров]

Да вы издеваетесь что-ли? https://codepen.io/aliencash/pen/gGvVbQ?editors=1100#0
Если вы понимаете как работает то или иное свойство css, таких вопросов быть не должно.

Answer 2

[Олег]

Для этого необходимо поместить каждое изображение в блок, и задать этому блоку overflow: hidden

https://codepen.io/ovvivus/pen/GMQVYb

Comments

[Stels007]

Огромное Вам спасибо!

Answer 3

[Artem0071]

может выставлять у .kar1:hover zIndex: 9999 ?