Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

by

Answer for 2020:

This effect can now be achieved with true alpha transparency, without the need to cover the bottom with an additional <div>. Simply use the CSS mask-image property with a linear gradient that fades from black to transparent. The browser should take care of the rest for you. Demo:

.container {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  height:  150px;
  width: 300px;
  overflow-y: scroll;
}
body {
  background: #09f;
  transition: background 0.5s ease-out;
}
body:hover {
  background: #f90;
}
<div class="container">
  <p>Mouse in/out of this demo or scroll down to see that it's true alpha! <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nisl id lectus viverra faucibus. Cras sed est sit amet turpis placerat consequat. Vestibulum viverra accumsan nisl a dapibus. Quisque mollis porta dictum. Praesent dictum non nisl at rutrum. Nam sem orci, efficitur quis faucibus non, aliquam eget est. In nec finibus ex, quis tristique augue. Duis tristique turpis a nunc sodales tincidunt.</p>
  <p>Morbi vehicula nisi ut lacus ornare, ac tincidunt sapien pellentesque. Aliquam gravida id dolor eget volutpat. In hac habitasse platea dictumst. Aenean ac enim eros. Vivamus augue nunc, interdum vitae pellentesque nec, interdum non turpis. Quisque viverra eget nibh in varius. Vivamus vel euismod velit. Vivamus suscipit lorem et porttitor gravida. Donec non nulla nulla. Duis eget dui sed urna eleifend sagittis.</p>
</div>

The best part of this approach is that it’s true transparency, instead of faking it by covering your text with a color that matches the background. This allows for scrolling and background images! I change the background color on hover to demonstrate that it’s truly transparent.

Browser support is pretty solid, except for IE.

More Related Contents:

  1. CSS how to make an element fade in and then fade out?
  2. How would I achieve a shadow that won’t show through transparent text?
  3. Fill in text in HTML5
  4. Change text-color on div :hover [closed]
  5. CSS customized scroll bar in div
  6. Is there a way to apply a CSS style on HTML5 datalist options?
  7. Show Child Div within Hidden Parent Div
  8. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  9. Failed to decode downloaded font
  10. Actual table Vs. Div table
  11. Which HTML5 reset CSS do you use and why? [closed]
  12. What is the current state of the “scoped” attribute for the style element in HTML5?
  13. Proper way to apply CSS to HTML5 custom elements
  14. Div height 100% and expands to fit content [duplicate]
  15. Add a text suffix to
  16. html5 vertical spacing issue with
  17. Adjacent divs with angled borders? [duplicate]
  18. How to write a caption under an image?
  19. Using background-attachment:fixed in safari on the ipad
  20. Overflow to left instead of right
  21. HTML / CSS Popup div on text click [closed]
  22. Custom tags… why not?
  23. Cross-Fade between images with CSS in loop
  24. CSS: How to align vertically a “label” and “input” inside a “div”?
  25. Align text to the bottom of a div
  26. Full background image with fade effect
  27. There is a 4px gap below canvas/video/audio elements in HTML5
  28. How can I align 3 divs side by side?
  29. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment