SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS rollover effect...how to?

    Hello,

    I'd really like to achieve the same effect as Carhartt have on their website here http://www.carhartt-streetwear.com/. At the bottom you can see 4 boxes, with images as their background, and text overlayed. When you roll over, the image seems to be overlayed with an orange grid effect?

    What have they done here? I though a solution might be to just do <div> with a background image, and put txt in the div. But in my case, there is only one line of text, and this doesn't "stretch" the div to the height of the image. I end up with cut-off boxes.

    And how are they achieving the rollover effect?

    Thanks very much in advance.......

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    They just do something like this:

    http://www.pmob.co.uk/temp/link-hover.htm

    The whole thing has to be a link and you just swap the background image on hover. The above demo just changes the background-color but could be swapped to use an image instead.

    You have to use an anchor as IE6 doesn't support hover on any other elements. (It can be done on other elements for other browsers but won't work in IE unless you add a some JS to help it along.)


Bookmarks

Posting Permissions

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