HTML & CSS How can I make small objects move out from behind a large object when I hover over it?

[theoreticallyjo]

I need some small images to come out from behind a main image when the cursor is over it.

I'm not having any trouble with the hover property, but I do not know how to apply it to other objects (i.e., I'm fine with "this image moves when you hover on it" but need help with "this image moves when you hover on a different one").

 

[Mutiny]

I think what you will want to do is have a container that both the image the user will hover over as well as the item that will pop-out on hover will both live in. Then you want to make that container the thing that users hover over. What this lets you do is have your default set of classes, then have a hover state in your css for the main container that contains the changes you want to make. Something like:

.my-container {
     position: relative;
}
 .my-container .thing-to-hover-over {
     pointer-events: none;
     z-index: 10;
     position: absolute;
     left: 0;
     top: 0;
     width: 50px;
     height: 50px;
}
 .my-container .thing-that-pops-out {
     z-index: 1;
     position: absolute;
     left: 0;
     top: 0;
}
 .my-container:hover .thing-that-pops-out {
     left: 75px;
}

I think that would be the CSS way to do it. The "pointer-events: none" should allow the user's mouse event to pass through the item they are hovering over into the parent container.

Alternatively you could have some Javascript that adds a class to the pop-out item when hovering over the item you want users to hover over, but that's not as clean as a CSS only solution.