Henry Henry - 15 days ago 5
CSS Question

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);


}

Answer

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

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