Henry Henry - 1 year ago 80
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 Source

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

img.one:hover {
  transform: scale(1.1);
  z-index: 1;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download