0

As i scroll how can i fade text out at the top of a div over a background image without the use of an image?

I know loads of people will come on here and tell me every reason why i should use an image however can it be done without?

Any advice would be greatly appreciated...

Andy
  • 2,991
  • 9
  • 43
  • 62
  • So you want to fade a portion of text in the div but not all the text? – James Hill Aug 15 '11 at 18:39
  • 2
    I don't understand what your asking, you just want some text to fade when hovering over a div? – Loktar Aug 15 '11 at 18:39
  • possible duplicate of [Gradient alpha fade out effect with CSS 3](http://stackoverflow.com/questions/3543887/gradient-alpha-fade-out-effect-with-css-3) – Marc B Aug 15 '11 at 18:39
  • 1
    Can you at least post an image of what you'd like the effect to look like? – zzzzBov Aug 15 '11 at 18:39

3 Answers3

3

You'll have to overlay your div with another element (preferably a pseudo-element), and have a background-gradient on it, matching your div's background color.

Assuming your background is black, you'll use this:

div {
    position: relative;
}
div:before {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%);
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
}

Here's the fiddle: http://jsfiddle.net/SFYrg/

You'll obviously have to add all those vendor prefixes.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • Nice idea, thanks for the input...could it be done with JS for cross browser compatibility? – Andy Aug 15 '11 at 18:52
  • If you're lazy to add all those prefixes yourself, then use this: https://github.com/codler/jQuery-Css3-Finalize. If my answer resolved your question, then accept it so that others coming to this post will know the answer. – Joseph Silber Aug 15 '11 at 18:54
  • :) Its not about being lazy...i have a very unique issue which would be best served with just JS because there is a coloured background image involved. – Andy Aug 15 '11 at 18:56
  • Your solution is great but it would require me to position the image slightly above the gradient...perhaps i didn't make it clear enough in which case i apologise. – Andy Aug 15 '11 at 18:57
  • If by "colored background image" you mean that the background is not made up of one solid color, then my answer is not gonna help you much... – Joseph Silber Aug 15 '11 at 18:57
  • It maybe that i need to move forward with your idea and re-position my image...i'd rather not have to if its possible. – Andy Aug 15 '11 at 18:59
  • The only other way would be to build a canvas overlaying your div, and dynamically draw the background image on the canvas, and then apply the gradient to the canvas. This would take some work to get right, but is totally doable (although browser support is sketchy at best). – Joseph Silber Aug 15 '11 at 19:01
0

If you do not want to use an image, you could use a gradient instead, on a div which would be superimposed on top of your content div.

You can use http://www.colorzilla.com/gradient-editor/ for quickly generating your gradient, with all browser-specific prefixes.

Philippe Plantier
  • 7,964
  • 3
  • 27
  • 40
  • Keeping in mind that this has compatibility issues with old browsers, especially IE. – rlb.usa Aug 15 '11 at 18:46
  • That's a different approach thanks...i was wondering whether it can be done literally with the use of JS or something... – Andy Aug 15 '11 at 18:49
-1
  $("myElement").fadeOut("slow");

Put the text into a container of some sort and fade it out with jQuery. You don't need any images.

rlb.usa
  • 14,942
  • 16
  • 80
  • 128