masking image with CSS

by

You only need to consider one image which is the bottom part of your mask then use a simple gradient for the other part. You also don’t need mask-composite. Simply adjust the size/position so that both mask don’t overlap:

.img-poster {
  display: block;
  max-width: 100%;
  -webkit-mask:  
     linear-gradient(#fff,#fff)              top,
     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
  -webkit-mask-size:
     100% calc(100% - 30px),
     auto 30px;
  -webkit-mask-repeat: repeat-x;
  mask:  
     linear-gradient(#fff,#fff)              top,
     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
  mask-size:
     100% calc(100% - 30px),
     auto 30px;
  mask-repeat: repeat-x;
}
<section class="section poster-container">
  <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>

More Related Contents:

  1. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  2. How to modify the fill color of an SVG image when being served as background image?
  3. Make flex items take content width, not width of parent container
  4. Is element block level or inline level?
  5. Style input type file? [duplicate]
  6. Maintain the aspect ratio of a div with CSS
  7. How do I give text or an image a transparent background using CSS?
  8. How to display scroll bar onto a html table
  9. How to apply CSS page-break to print a table with lots of rows?
  10. Remove default text/placeholder present in html5 input element of type=date
  11. issue with CSS media queries(scrollbar)
  12. CSS: Workaround to backdrop-filter?
  13. Inspect webkit-input-placeholder with developer tools
  14. How can I put DIV in P?
  15. Different CSS for each browser?
  16. Why is there vertical scroll on the main container?
  17. CSS: image link, change on hover
  18. How to make a stable two column layout in HTML/CSS
  19. CSS Expressions
  20. Why is translateY(-50%) needed to center an element which is at top: 50%?
  21. Transparent scrollbar with css
  22. Make A List Item Clickable (HTML/CSS)
  23. Border around specific rows in a table?
  24. Object-fit not affecting images
  25. Making a div that covers the entire page
  26. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  27. How to calc() the number of rows in a grid template?
  28. Is it possible to set a src attribute of an img tag in CSS?
  29. How to fill 100% of remaining height?
  30. How to make a table with equal column widths in CSS?

Leave a Comment