CODEWITHSUNDEEP
htmlcss
Henry
Henry

Reputation: 3

Image enlarge transition

I'm very new to HTML and CSS but I've strung together some code that makes my images enlarge a little bit when my mouse hovers over them. However, the images sometimes don't enlarge over each other, some stay behind others because they are positioned closely together. Does anyone know how to make them ignore the other images when they enlarge?

Here's my code:

img.one {
position: absolute;
cursor: pointer;
top: 10px;
left: 10px;
transition: all .2s ease-in-out;

}

img.one:hover {
transform: scale(1.1);

}

Upvotes: 0

Views: 69

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18649

Use the z-index property to control which elements are in front of others.

img.one:hover {
  transform: scale(1.1);
  z-index: 1;
}

Upvotes: 1

Related Questions