FORUMS: list search recent posts

CSS Image Overlay with Linked Text

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Ken Walton
CSS Image Overlay with Linked Text
on Nov 3, 2010 at 7:28:04 pm

I'm running into a problem recreating an easy to pull off "print" effect one of our designers came up with for a site I'm working on.

I've got a fixed-height, scrollable sidebar that shows an unlimited number of event/news entries (via PHP), but I need the bottom 15% or so of the div to "fade to black". I'm halfway there, as you can see on this semi-static example here:

The problem is, I need my linked text "behind" the overlaid PNG to remain linkable/selectable...

PS. this example is just page text - no php calls or scrolling yet. It seems like the solution should work the same way on either though.

Thanks in advance -

Ken Walton

Return to posts index

Fernando Mol
Re: CSS Image Overlay with Linked Text
on Nov 18, 2010 at 6:15:14 pm

Well, theoretically you could add your gradient as a background graphic to an empty span element that's in front of your text box.

I have seeing this effect in some experimental sites.

<div class="yourGradient">
<h1><span></span>Your Text</h1>

You'll need this CSS

.yourGradient h1 span {
background:url("/linkToYourGradient.png"); //You may want to position it
height:300px; //the height of your text block

I hope this helps

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved