CODEWITHSUNDEEP
htmlcss
Shimrod
Shimrod

Reputation: 3205

Fade the bottom of a div over a semi-transparent background

I have a div containing text placed over a semi-transparent background. I would like the bottom of this div to gradually disappear.

I used a gradient to achieve this. Over a non-semi-transparent background it works without any problem.

#fadeout {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
    pointer-events: none;
}

I made this fiddler showing what I want to do: https://jsfiddle.net/ytuxn9Lu/6/ (link edited to add random background image, see edit)

The problem is that the gradiant overlay adds with the background and so the result is not what I want.

What can I do to achieve this ?

Thanks !

EDIT: To add more information, in the real application, the body has an image background. The #parent div has a semi-transparent background and the #fadeout-parent div contains the text and the fadeout div. The solution sould then work no matter the background color/image (if possible).

Upvotes: 3

Views: 5025

Answers (4)

MarioZ
MarioZ

Reputation: 997

I found something that can work:

body {
  background: url(https://unsplash.it/900/600?random);
  padding: 50px;
}
#parent {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}
#fadeout-parent {
  position: relative;
  -webkit-mask: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.35, rgba(0, 0, 0, 1)), color-stop(0.50, rgba(0, 0, 0, 1)), color-stop(0.65, rgba(0, 0, 0, 1)), color-stop(1.00, rgba(0, 0, 0, 0)));
}
<body>
  <div id="parent">
    <div id="fadeout-parent">
      <h1>An h1 header</h1>

      <p>Paragraphs are separated by a blank line.</p>

      <p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p>

      <ul>
        <li>this one</li>
        <li>that one</li>
        <li>the other one</li>
      </ul>

      <p>Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.</p>

      <blockquote>
        <p>Block quotes are written like so.</p>

        <p>They can span multiple paragraphs, if you like.</p>
      </blockquote>

    </div>
  </div>
</body>

It has a downside, browser compatibility. I works in Chrome and Opera.

Upvotes: 2

kipy
kipy

Reputation: 642

I think the perfect way to achieve this does not currently exist..

So, there's Yet Another Tricky Solution : mine

https://jsfiddle.net/ytuxn9Lu/9/

(code seems to be mandatory when posting jsfiddle link)

Upvotes: 2

Johannes
Johannes

Reputation: 67778

There is a solution here

https://jsfiddle.net/hgtdwbrL/1/

I just changed the values of the gradient (used a color picker to get the color from below the content and added 0.9 transparency):

background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(179, 179, 179, 0.9) 95%);

Upvotes: 3

EltonFlow
EltonFlow

Reputation: 111

If im barking up the wrong tree please forgive me.

If you are just trying to fade the text out within the div you could just change to:

#parent {
    background-color: white;
    padding: 20px;
}

If you want the background div to fade out also you could try putting a gradient color on that div. Maybe remove the

<div id="fadeout"></div>

altogether.

Upvotes: 1

Related Questions