Member Avatar for Member #1020230

Hi,
I have several image tags overlapping using css and am able to use hover to make the one selected move to the top of he pile.

#gallery  img{
float: left;
width: 250px;
height: 250px;
position: relative;
}

#gallery img:nth-child(2) {
left: -200px;
}


#gallery img:hover{
z-index: 10;
}

I am unable to make the hovering item stay on top of the pile img:active does not work.
If i add anchor tags around the image tags the positioning does not work.

I am not sure what to do.

  • 2 Contributors
  • 5 Replies
  • 410 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short summary and what's missing from the thread: was stacking images with CSS and used hover to bring an image to the front. correctly pointed out that a persistent state needs JavaScript and provided a jQuery example (which resolved the immediate problem). The follow‑up issue — “adding anchor tags breaks positioning” — wasn’t explained in detail. The root cause is DOM structure and selector scope, not a mysterious CSS bug.

Why anchors often “break” the layout: wrapping each <img> in an <a> changes which element is the gallery’s nth child. Selectors like #gallery img:nth-child(2) stop matching the intended element because the image is no longer the gallery’s direct child. Common fixes:

  • target the wrapper instead (e.g. #gallery a:nth-child(2) img),
  • use :nth-of-type() if appropriate, or
  • give images explicit classes and style by class (most robust).
    Also consider switching from floated, relatively positioned images to absolutely positioned children inside a single position: relative container — that simplifies stacking and z-index management.

A small, accessible vanilla‑JS approach to keep the clicked/focused image on top (adds keyboard support via tabindex):

const imgs = document.querySelectorAll('#gallery img');
imgs.forEach(img => img.setAttribute('tabindex','0'));
function setActive(el){
  imgs.forEach(i => i.classList.remove('active'));
  el.classList.add('active');
}
imgs.forEach(img=>{
  img.addEventListener('click', ()=> setActive(img));
  img.addEventListener('focus', ()=> setActive(img));
});

(The CSS .active would give the higher z-index.)

Quick troubleshooting & best practices: inspect computed styles in DevTools to find unexpected stacking contexts (parents with transform, opacity < 1, filter, or will-change create new contexts). Prefer animating transform/opacity for performance and add sensible alt text and keyboard focus so the gallery remains accessible. This complements ’s jQuery suggestion while keeping the DOM/selector issues and accessibility covered.

Recommended Answers

All 5 Replies

Member Avatar for gentlemedia

When do you want the active (hovered) image stay on top? I mean if you take of the cursor of the image, it will go back to it's original state and that's how hover works. The :active pseudo class can't help you with this either. You can't do this with CSS alone, you'll need JavaScript to trigger an event that keeps the image on top once you hovered it and go back once you hovered another image in the stack.
Actually, there might be a CSS only solution, but then you will have to use a CSS transition with an 'infinite' delay which is kind of a 'hacky' solution :).

Member Avatar for Member #1020230

How can I use javascript to make the img active

Member Avatar for gentlemedia

With jQuery you can do something like this:

$(function() {
  $('img').mouseenter(function() {
    $(this).addClass('active').siblings().removeClass('active')
  });
});

The .active class has the higher z-index in your CSS.

Little demo: http://cssdeck.com/labs/full/jwprgxso

Member Avatar for Member #1020230

Got it. I hadnt put a jquery script tag in. Thanks alot

Edited by Member #1020230
Member Avatar for gentlemedia

Here's the full code of that demo. Apologies for the unreadability. I did indent the code, but for some reason it doesn't show up fully indented.

<!doctype html>
<html>

<head>

<style>

    .gallery {
      position: relative;
      margin: 200px;
    }

    .gallery img {
      position: absolute;
      z-index: 0;
    }

    .gallery img:nth-child(1) {
      left: -25px;
      transform: rotate(-7deg)
    }

    .gallery img:nth-child(3) {
      left: 25px;
      transform: rotate(7deg)  
    }

    .gallery img.active {
      z-index: 10;
    }

</style>

</head>

<body>

    <div class="gallery">
        <img src="http://placehold.it/200x250/3ebecc/000000&text=image+1">
        <img src="http://placehold.it/200x250/4eb7a3/000000&text=image+2">
        <img src="http://placehold.it/200x250/c6b654/000000&text=image+3">

    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('img').mouseenter(function() {
                $(this).addClass('active').siblings().removeClass('active')
            });
        });
    </script>

</body>

</html>
Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.