Move your cursor over an image to modify the z-index of another image

Question

Move your cursor over an image to modify the z-index of another image

I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center images to (-1). My objective is to make it so that when I hover over one of the small images, the corresponding image appears as the central large image by changing the respective image's z-index to 5. However, no matter what I try, I cannot achieve the desired outcome. Any help would be greatly appreciated (I am only using CSS); thank you in advance!

Additionally, while testing the hover effect, I encountered a puzzling problem. When I use the following code:

#img3:hover + #img4{
    opacity: 0.2;
}

This code works as expected. But when I try this:

#img3:hover + #img5{
    opacity: 0.2;
}

It does not work! I am still unsure why there is such a big difference between #img4 and #img5. Can someone provide some insight on this?

html css hover z-index

Answer 1

Answer №1

Your approach was almost there, however, you must modify it from

#img3:hover + #img4{
    opacity: 0.2;
}

to use the ~ selector, resulting in something like

#img3:hover ~ #imgCenter3 {
    z-index: 10;
}

a + b specifies any b element immediately following the a element.

a ~ b specifies any b element that is a sibling of a, not necessarily right next to it.

Answer 2

Your approach was almost there, however, you must modify it from

#img3:hover + #img4{
    opacity: 0.2;
}

to use the ~ selector, resulting in something like

#img3:hover ~ #imgCenter3 {
    z-index: 10;
}

a + b specifies any b element immediately following the a element.

a ~ b specifies any b element that is a sibling of a, not necessarily right next to it.

Answer 3

Answer №2

Consider implementing JavaScript for this:

let hoverEffect = document.getElementById("img3");

hoverEffect.addEventListener("mouseover", function() {
    document.getElementById("img4").style.opacity = ".2";
    document.getElementById("img5").style.opacity = ".2";
});

Answer 4

Consider implementing JavaScript for this:

let hoverEffect = document.getElementById("img3");

hoverEffect.addEventListener("mouseover", function() {
    document.getElementById("img4").style.opacity = ".2";
    document.getElementById("img5").style.opacity = ".2";
});

Move your cursor over an image to modify the z-index of another image

Answer №1

Answer №2

Similar questions

Tips for showcasing a lineup horizontally with HTML and CSS

The picture is unavailable for inline viewing

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Avoiding the use of mailto links in PHP

The Owl carousel slide vanishes unexpectedly after resizing the window

Tips for showcasing information on an HTML website

Ways to modify the color of a chosen item in a Xul listbox?

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Verify if the value of localStorage matches the specified value, then conceal the element

How come my gifs appear tiny even though I've adjusted their width to 32% each?

Displaying WordPress plugin queries in a linked file

Hide the menu when a user taps on an item on mobile or tablet devices

Create a password variable while typing

What could be the reason for the unexpected invisibility of the 4px margin on a static div?

Retrieving specific values for each key in JSON using PHP

Switching the menu in mobile view: utilizing vue and pug

Delay the jQuery event handler for a few milliseconds before triggering

Issues with Node JS app's handling of php mailer code

Ensure that a DIV element stretches beyond the limits of its container

How can you showcase search results on a single page URL in PHP by simply clicking a submit button?