Theory Looking at current implementation of the pinterest site (it might change in the future), when you open the overlay a noscroll class is applied to the body element and overflow: hidden is set, thus body is no longer scrollable. The overlay (created on-the-fly or already inside the page and made visible via display: block, … Read more
Expand snippet I would suggest learning about position: relative and child elements with position: absolute.
You can use filters with -webkit-filter and filter: Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters You can change an image to grayscale, sepia and lot more (look at the example). So you can now change the color of a PNG file with filters. Source
You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this: