Fade image to transparent like a gradient

by

If you want this:

enter image description here

You can do this:

<html>
  <style type="text/css">
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src="https://i.imgur.com/sLa5gg2.jpg" />
  </body>
</html>

More Related Contents:

  1. How do I combine a background-image and CSS3 gradient on the same element?
  2. Use CSS3 transitions with gradient backgrounds
  3. Gradient borders
  4. CSS3 Transparency + Gradient
  5. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  6. Gradient text color
  7. Gradients in Internet Explorer 9
  8. Can you add noise to a CSS3 gradient?
  9. SVG gradient using CSS
  10. Using CSS, can you apply a gradient mask to fade to the background over text?
  11. Blocky gradient effect in CSS3
  12. How can I prevent CSS gradient banding?
  13. css text gradient
  14. CSS gradient checkerboard pattern
  15. Fixed gradient background with css
  16. What does the “>” (greater-than sign) CSS selector mean?
  17. css3 nth of type restricted to class [duplicate]
  18. Why em instead of px?
  19. CSS to select/style first word
  20. Any way to limit border length?
  21. Twitter Bootstrap Form File Element Upload Button
  22. Centering a background image, using CSS
  23. How can one import only variables and mixins from Sass stylesheets?
  24. How to override the properties of a CSS class using another CSS class
  25. blur of part of Background image with css
  26. How to align a div to the top of its parent but keeping its inline-block behaviour?
  27. Styling elements with a dot (.) in the class name
  28. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  29. CSS Transform with element resizing
  30. Correct terms and words for sections and parts of selectors

Leave a Comment