Using CSS can I :hover over an image i have in a list <li> and make another image appear in its place?

One way you could do it with css only is by setting the images as backgrounds in the css instead of as content in the html . I'm putting together a quick codepen to demonstrate this for you. Give me a few minutes.

But if the images really are part of content, then this is a bit of a hack. And it would be more appropriate to do it with a bit of Javascript.

http://jsfiddle.net/TkydE/

I used combination of relative/absolute positioning and z-index.

The #pic3 is there because absolute positioning of #pic1 and #pic2 disturbs the flow of the site and the positioning of the elements - the li would have height of 0 and whatever width is inherited.

Only condition is that size of #pic1 is the same as of #pic2. #pic3 can be a picture with the image from #pic1 or #pic2.

It could be redone with CSS 3 selectors such as :first-child, :nth-child(2), :last-child.

PS No JS, pure CSS :)

I found an even nicer solution just using :hover on .container .

http://jsfiddle.net/5UT2N/

Only drawback is that :hover state is trigered every time that a coursor hovers a li element, which is by default 100% wide and the pictures might not be. This can be fixed if one sets a certain width to a list for example when one is using some grid or something. img element also has to be 100% wide.

The concept is demonstrated in the next fiddle.

http://jsfiddle.net/5UT2N/1/

Hi Daniel,

EDIT: Cool, you figured out the backtick.

Hi Gary,

Is it possible to change the image in my first li to a another image when i use :hover???

Thanks

or will i cover this in java script???

Nice, Jaka.

Daniel, in my opinion, this might be a better solution than the one I was putting together. I'll still post for you what I was doing later, for my own learning curve. But my cheap computer is getting slow and glitchy right now.

Hi Jake and Gary,

I have tried you method and am still having trouble... can you see any problems with my html or css?

<div id="navpics" style="width:300px;">
                        <ul >
                <li class="container" > 
                    <img src="img/front_of_shop.jpg" id="pic1">
                    <img src="img/tennis.jpg" id="pic2">
            </li>

                     <li> <img src="img/navpic2.jpg"></li>
                <li><img src="img/frog.jpg"></li>   
                <li> <img src="img/navpic4.jpg"></li>
                    </ul>
    </div>

.container:hover #pic2 {
    display: none;
}

.container:hover #pic1 {
    display: none;
}

.container:hover#pic2 {
    display: inline;
}

img {
width:100%;
}

.container #pic2 { /* removed :hover */
    display: none;
}

.container:hover #pic1 {
    display: none;
}

.container:hover #pic2 { /* space before #pic2 */
    display: inline;
}

img {
width:100%;
}

The idea behind it

• When there is no cursor over li element with class container only #pic1 should be displayed. I do not change display property for #pic1, I just leave it at default. I do however change display property of #pic2, I hide it - display: none
• When there is a cursor over li element I hide the #pic1 and display #pic2 with display: inline

Jaka you are amazing...Thank you! My first picture is now changing to another picture when i hover over it.

One more thing.... Now i have added your html and css my images are no longer horizontally inline, which they were before. I have tried:

#navpics ul li img {
    display: inline;
}

but the images are now in a vertical list. I am trying to get them to horizontally align! What should i change?

Thanks again Jaka!

I think the

img {width: 100%}

is to blame.

Pictures can't be inline because every picture takes 100% of the width.

Replace it with

img#pic1, img#pic2 {
width: 100%;
}

Does it work?

Afraid not!

Maybe I could change me list into a table to make the pictures appear inline?

Hi Daniel,

No, you won't need to (and shouldn't) change the list to a table. Can you put your html & css into a jsfiddle or codepen so we can fiddle with it?

EDIT: Don't worry about uploading the images.

Thanks, Gary

hi gary!

I have taken the list away and have structured where i want my pictures to go and applied the hover properties to my photos in order to change pictures when your mouse goes over the picture!

Thanks for you help!!!