7

I already have an element with an image as a background. Is it possible make a text on the end fade out just like in this question
enter image description here

The problem is that the background image already have a gradient and I need the text on it just to become transparent without any modifications in the background.

ashleedawg
  • 20,365
  • 9
  • 72
  • 105
quatzael
  • 81
  • 1
  • 2
  • 1
    I am not sure if I made it clear enough. Take the grey rectangle with a vertical gradient here above. How could I make the text: "CAREERS 2.0" fade out horizontally on the same background? – quatzael Oct 29 '13 at 23:23
  • Yes. it's posible. Just use the code provided in the answer from MarioErmando (only supported in webkit) – vals Oct 30 '13 at 16:45

2 Answers2

4

You say that you don't want to modify its background-image because it has another image already. But be aware that with CSS3 you can use multiple backgrounds.

But if you really don't want to modify its background-image, you could modify its :after's background-image:

Demo 

p {
  position: relative;
  line-height: 1.25em;
}

p:after {
  background-image: linear-gradient( to left, #fff, rgba(255, 255, 255, 0));
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1.25em;
  content: '';
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
ashleedawg
  • 20,365
  • 9
  • 72
  • 105
Oriol
  • 274,082
  • 63
  • 437
  • 513
3

Use the code on http://jsfiddle.net/Ff9JL/. This seems to be what you are looking for. Take a look at the li:after css code.

    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
user2929967
  • 31
  • 1
  • 2
    This just puts the gradient on the background, but I need the text to fade out not the background – quatzael Oct 29 '13 at 22:58