Make Images appear on Hover

I am making a list of 5 recommended sites. I want to have each sites logo appear to the right of the list when the cursor hovers over the link (with site number 1's logo showing as default).

How can I best do that using CSS?

Thanks

 

I'm no expert but I think you need javascript for that.

Anyhow, there is a way to do it in CSS with the anchor tag. However, this will display the site's logo to each of the list items on each hover, and you cannot specify a "default".

Anyways, for each 5 of the recommended sites, you will need to specify a styling for each.

a {
     display: block;
     width: ____px;    [i]/* the initial width of the link */[/i]
     height: ____px;    [i]/* the initial height of the link */[/i]
}

a:hover {
     background: url('______') top right no-repeat;    [i]/* specify the location of the site's logo */[/i]
     width: ____px;    [i]/* increase the width of the link to allow space for the logo */[/i]
}

Code (markup):

You will need to change the background source for all 5 sites by giving them a separate class. I don't think this is what you wanted, but unfortunately, I think this is the only way you can do it in CSS.