Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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

    Code:
      
    <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>
    Code:
    .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

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Why don't you just set those images as a background of the anchors?
    Code:
    <a href="portfolio_item.html" class="envirot">Envirot</a>
    Code:
    #recent-work a{
    display:block;
    width: some suitable value px
    height:some suitable value px
    }
    Code:
    a.envirot{
    backgroud:#somecolor url(../img/pictures/envirotecover.png) no-repeat;
    }
    a.envirot:hover{
    backgroud:#somecolor url(../img/pictures/envirotec.png) no-repeat;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •