question about onmouseout effect using css

my question is if i move the mouse over an image which is a link to get any effect i can use
a:hover{

}

lets say for example i have a horizontal row which contains images and these are links, ex= home aboutus ... total of 5 links
just above this horizontal row lets say i have the same set of 5 images which by default are hidden using display: none;
<img src="homehidden.jpg" id="home"> <img src="abouthidden.jpg" id="about"> ...

#home{
display: none;
}

#about{
display: none;
}
...


only when i mouse over any of the links which are visible by default, i would like to show 1 image relavant to the link ex=home which is above all the 5 visible images so should my css code be

visiblerowhomeimage:hover{
#home.visibility: visible;
}
which would show the invisible image on mouse over for home, aboutus etc...


please advice if my code is correct.

thanks.