Comments on: Link with CSS Background Overlay

By: How to customize Graphical Links with CSS Background Overlay | Castup

How to customize Graphical Links with CSS Background Overlay | Castup — Thu, 01 Jan 2009 23:31:06 +0000

..."category">usefull links January 1 How to customize Graphical Links with CSS Background Overlay resource: http://firmanw.com/link-with-css-background-overlaydemo: ...

By: How to customize Graphical Links with CSS Background Overlay | Castup

How to customize Graphical Links with CSS Background Overlay | Castup — Tue, 30 Dec 2008 09:47:10 +0000

...>HTML & Web Design December 29 How to customize Graphical Links with CSS Background Overlay resource: http://firmanw.com/link-with-css-background-overlaydemo: ...

By: zubfatal

zubfatal — Sat, 27 Dec 2008 19:22:28 +0000

It could also be done, using a solid background color, which would make it easier to change the desired color, although i must admit it looks nicer with rounded corners

a.overlay:hover span {
top: -24px; /* height of the used image */
background-color: #888;
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
cursor: hand;
}

By: Firman

Firman — Mon, 01 Dec 2008 21:06:17 +0000

Hi Paul, I have tried it out but still IE 6 won’t care about it. I’m wondering, can you point me to your source?

By: Paul Boutin

Paul Boutin — Sun, 30 Nov 2008 12:58:14 +0000

Firman, The reason its not working in IE is because the span is positioned absolute and it is now on top of the a tag, so the “a” tag never gets the hover event. I tried it again without using positioning and I got it to work in all browsers. Put your span after the image tag in the source code and set the spans top margin to -80px. This will place the span over the image but not the “a” tag.

By: Firman

Firman — Fri, 28 Nov 2008 20:10:47 +0000

Sound nice Heru, you may just place your image directly and save your time

By: Heru

Heru — Fri, 28 Nov 2008 17:27:26 +0000

I’m creating my png images using GIMP and there is no gamma metadata, so i don’t need TweakPNG.

btw, thanks for the iepngfix links from TwinHelix, it works

^_^

By: Firman

Firman — Fri, 28 Nov 2008 15:45:22 +0000

Hi Paul, thanks for the suggestion. I have tried your trick but somehow it doesn’t work at all, still the ironic of IE 6.

By: Paul Boutin

Paul Boutin — Fri, 28 Nov 2008 12:20:59 +0000

This is a very cool effect thanks for sharing. I will however help you simplify the code involved. the JavaScript is not needed as long as the span is inside the “a” tag, you can access the span on the “a” tags hover event in CSS like this… a:hover span { background:url(); }