No replies
nevblanc79
nevblanc79's picture
Offline
newbie
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2011-09-06
Posts: 4
Points: 7

Hi,

I'm trying to apply a style to a div so that the black and white image turns to color on hover. There are 4 different images and, at present, I can only get one to work. I tried to change the class name and simply copy down the relevant styling, but it doesn't seem to work.

Attached is the html fopr the div and the corresponding, I think, part of the style sheet.

Html:

<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>

CSS:

.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; }

I thought that by taking the styling for the .over, copying it and changing the class in the html to .over1 and applying the copied css with the relevant image link would work but no transition occurs.

Could anyone help.

Thanks,

nevblanc79