Results 1 to 2 of 2
Thread: CSS rollover effect...how to?
Feb 3, 2008, 09:24 #1
- Join Date
- Dec 2007
- 0 Post(s)
- 0 Thread(s)
CSS rollover effect...how to?
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.......
Feb 3, 2008, 12:01 #2
- Join Date
- Jan 2003
- Hampshire UK
- 183 Post(s)
- 6 Thread(s)
They just do something like this:
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.)