CSS Image change on hover

Hello,

I have a div containing four images sitting black and white that I want to change to colour on hover. The first one works fine, however the when I try to apply a new class name to the next image to incorporate the same style elements as the first picture it doesn't work.

I thought it would be a case of merely changing the class to ensure that the relevant image would appear when hovered over.

Could someone help?

I have attached the html along with the css


<div id="recent-work">
<h3>Our Titles</h3>
<div class="one_fourth">
<a href="portfolio_item.html" class="over"></a>
<a href="portfolio_item.html"><img src="img/pictures/envirotecover.png" alt></a>
</div>
<div class="one_fourth">
<a href="portfolio_item.html" class="over1"></a>
<a href="portfolio_item.html"><img src="img/pictures/grocerover.png" alt></a>
</div>
<div class="one_fourth">
<a href="portfolio_item.html" class="over"></a>
<a href="portfolio_item.html"><img src="img/pictures/plantover.png" alt></a>
</div>
<div class="one_fourth last">
<a href="portfolio_item.html" class="over"></a>
<a href="portfolio_item.html"><img src="img/pictures/projectscotlandover.png" alt></a>
</div>
<div class="clear"></div>
<a href="#" class="goto">View Portfolio →</a>
</div>


.over { opacity:0; filter: alpha(opacity = 0); position:absolute; background:#fff url(../img/pictures/envirotec.png) no-repeat right bottom; }
.over:hover { text-decoration:none; color:#666; }
.over span { font-size:22px; color:#7fc354; display:block; margin:10px 10px 5px 10px;}
.over p { margin:0px 10px; color:#7fc354; }


Thanks,

nevblanc79

Need a little bit more information to give you a better solution. Do you have a screen shot (or better a website) that you can provide that can show what you are trying to do?

It looks like the best solution for you would be instead of using two anchors (one over the other) to pull the effect off, you need to use a background-image sprite for the anchor and then move it when you hover to the bottom sprite.

Why don't you just set those images as a background of the anchors?
<a href="portfolio_item.html" class="envirot">Envirot</a>
#recent-work a{
display:block;
width: some suitable value px
height:some suitable value px
}

a.envirot{
backgroud:#somecolor url(../img/pictures/envirotecover.png) no-repeat;
}
a.envirot:hover{
backgroud:#somecolor url(../img/pictures/envirotec.png) no-repeat;
}