How to make it so that when you hover the picture was increased, but not beyond the neighboring borders?

Colleagues, please help! On the website there should be a matrix of photo 3 3 and animations, when you hover on each of them increases slightly. But when you zoom, increasing the picture with their edges on the neighboring climbs. How to make it would be increased on the inside?

<div id="conteiner">
 the <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>
 the <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>
 the <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;
}
June 14th 19 at 18:26
3 answers
June 14th 19 at 18:28
Solution
This requires you to place each image in the block and set the block overflow: hidden

https://codepen.io/ovvivus/pen/GMQVYb
Thank You very much! - Estel45 commented on June 14th 19 at 18:31
June 14th 19 at 18:30
Oh, God, what is there to think that? Need a wrapper with overflow: hidden;
Thank you for responding) I Tried with overflow: hidden, but not gone. Most likely I'm not correct it was used. Could You tell how to use it correctly in this case? - Estel45 commented on June 14th 19 at 18:33
- Are you kidding me or what? https://codepen.io/aliencash/pen/gGvVbQ?editors=1100#0
If you know how to work a particular css property, such issues should not be. - Estel45 commented on June 14th 19 at 18:36
June 14th 19 at 18:32
can put have .kar1:hover zIndex: 9999 ?

Find more questions by tags CSS