-
CSS Image Overlay with Linked Text
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:
https://mh1webdesign.com/~kirkbaue/dev/gradientTest.htmlThe 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
-
1 Reply
-
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.
You'll need this CSS
.yourGradient h1 span {
background:url("/linkToYourGradient.png"); //You may want to position it
display:block;
height:300px; //the height of your text block
position:absolute;
width:100%;
}
I hope this helps
Reply to this Discussion! Login or Sign Up