3 Years
Discussion Span
Last Post by 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 :).


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

Edited by adrian.mcguinness


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>



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




    <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">


    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        $(function() {
            $('img').mouseenter(function() {



Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.