how to put an image upon a image in a li which (on hover) changes its z-index


Tags: css,z-index,html-lists

Problem :

I have the following image in a li:

  <ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /></a> </li>
</ul>

My css looks like this:

ul.columns li img {
        position: relative;
        }

    ul.columns li:hover img{
        z-index: 999;
        }

What does it do: When I hover my mouse over the image (test.png), the image get's a new z-index. This is needed to keep the image visible (a div is displayed on hover and the image should stay on top of it). This all works great.

Now I want to have a image in the top right corner (displaying an X, so lets call it x.png) over the normal image. How to do this? Making the test.png a background image is not an option. Played around with some classes and z-index but the second image always appears besides the test.png image. I think I do something wrong with the CSS, but I don't know how to z-index the second image in a li

I have this atm:

<ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /> <img class="x" src="images/x.png" alt="" /></a> </li>
</ul>

Thanks



Solution :

try something like

 ul.columns li img,
 ul.columns li {
    position: relative; /* so the close image is relatively 
                           positioned inside <li> */
    z-index : 1;
 }

 ul.columns li img + img {
    position: absolute;
    top     : 0;
    right   : 0;
    display : none;
 }

 ul.columns li:hover img { z-index: 999; }
 ul.columns li:hover img + img  { z-index : 1000; display: block; }

    CSS Howto..

    jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images

    How can i get the source of the image in one div to another?

    How should I use `position` and other properties correctly to position my web page?

    How to vertically align the text into a coloured div using CSS?

    IE8 and lower showing background white

    How to make a list of “background-image” CSS using WebDriver with Java

    How to compress CSS

    How to disable by overriding webkit-transform and not deleting the line

    How to apply a responsive CSS height to an element using min/max-height and height?

    How to use CSS on an Html.ActionLink in C#

    how to remove table border line?

    How to override the CSS !important property when the original file loads after the customized css file

    How to make a HTML NavBar [closed]

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How to change css content hover effect background color css php in this situation?

    How to display “Classic” fractions in CSS / Javascript

    How Do I Place An Image To The Right of a Body of Text?

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    HTML CSS - How to render SQL nicely [closed]

    CSS: How to select elements by referencing the parent, not the child

    How to make gridview and cells bigger?

    How to change the location of my yt video ( I want to move it approximately 10 cm down and 10cm to the right so that it doesnt clash)

    How does the :not selector work to block older browsers and for which browsers does it work? [closed]

    How to put four images 2x2 on other image as background, CSS?

    How do you replicate this box-shadow effect?

    How do I fix the navigation menu in Firefox and Internet Explorer?

    How to customize devise login and signup forms created using the simple_form gem?

    How to get the Apple Javascript Split Flap Counter to run on pure CSS

    How to keep grid width if colums are switched in column menu