Need CSS effect when hovering over an image, to get another image and/or text to display above it

Question

I have 10 country flags on my company's website (VS 2010/vb/asp.net4.0). Clicking a flag will display the website in that country's language for their entire session.

I would like to, when the client hovers over the flag, have a mini-picture of that country hover above and to the right of the flag. So when they click on the German flag, a mini-map of Germany appears to the upper right -- and I'll z-index it so it goes above the table row above it -- and in addition to the image, it'll say something like, "Deutch" or "View this website in German" (in German, of course).

                   **Images of countries here when hovering**
       Flag1  Flag2  Flag3  Flag4  Flag5  Flag6  Flag7  Flag8

For someone like me who's not great at CSS, is this possible, and if so, how would I go about doing it? Any guidance would be greatly appreciated!

Answer 1

suppose you are using a list

<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>

.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}

you can add extra css to do the positioning in the .map bit!