How to bigger image when hover the images in gallery with css??

Question

I create big gallery
When I hover the image ,it is big but it's overlap with the another images and I use the z-index but it's not working...how to fix it?
Thanks for helping me

Answer 1

I do not understand what you really mean with overlap. I runned your code on a smartphone and that works not so good.
But if you make a hover image bigger this will always overlap another images.

If you mean that another images overlap this image, which will be hovered,
then you can set in the class „bigger“ a

z-index: 9;

z-index only works on positioned elements position: absolute, position: relative, position: fixed, or position: sticky
and flex items

Answer 2

Thanks but my problem is
When hover The image overlap with the another images...
Can you fix this problem??

Answer 3

sorry
I can't tell my problem very well
but you solve my problem
Thanks

Answer 4

I will try it...thanks
https://codepen.io/bobbykorec/pen/bGqOZBY
This link is grid gallery
and I create my gallery like this but I want to effect
when I hover the images
it is bigger than the other images without overlap the other images
my problem is overlap by the other images...

Answer 5

<style>
.bigger {
padding: 40px;
background-color: blue;
transition: transform .3s;
width: 100px;
height: 150px;
margin: 0 auto;
}
.bigger:hover {
transform: scale(1.4);
}
</style>

<div class="bigger"></div>

Answer 6

No problem Sara , You are welcome.

Answer 7

Can you link your code here if possible?

Answer 8

Try to put your image in a div container with a class.

<style>
.img-container{
overflow: hidden;
}
.img-container img{
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-out;
cursor: pointer;
}
.img-container img:hover{
transform: scale(1.2);
}
</style>

<div class="img-container">
<img src="image.jpg" />
</div>

Answer 9

Thanks

Answer 10

I do not understand what you really mean with overlap. I runned your code on a smartphone and that works not so good.
But if you make a hover image bigger this will always overlap another images.

If you mean that another images overlap this image, which will be hovered,
then you can set in the class „bigger“ a

z-index: 9;

z-index only works on positioned elements position: absolute, position: relative, position: fixed, or position: sticky
and flex items

Answer 11

Try to put your image in a div container with a class.

<style>
.img-container{
overflow: hidden;
}
.img-container img{
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-out;
cursor: pointer;
}
.img-container img:hover{
transform: scale(1.2);
}
</style>

<div class="img-container">
<img src="image.jpg" />
</div>