Question

I have recently stumbled uppon this website GrandPixels
and found one interesting effect. In the slideshow section you can see that images are kind of dotted, by zooming in I discovered that these dots are not the parts of the images but sort of overlay, achieved with CSS, I assume. Could anyone explain how this effect is achieved, ideally with css?

Answer 1

It’s done with 2×2 overlay transparent PNG image that can be extracted from here:
Background Overlay Pattern

Afterwards the class slideshow-overlay applied to an element to make it work:

.slideshow-overlay {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -99;
    height: 100%;
    width: 100%;
    background: url("images/bg-overlay-pattern.png") left top repeat
}