Geek asks and answers

The effect of overlapping dots with dots

I recently stumbled upon this GrandPixels site and found one interesting effect. In the slide show, you can see that the images are the points by scaling, I discovered that these points are not part of the image, but like overlay, achieved with the help of CSS, I suppose. Can someone explain how this effect is achieved, ideally with css?

+5
source share
5 answers

Made with 2x2 transparent PNG image that can be extracted here:
Background cover template

Then the class slideshow-overlayis applied to the 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
}
+3
source

2x2 px div .

+1

The css class is called .slideshow-overlay, and it uses a dot image images/bg-overlay-pattern.png(2x2), which is background-repeatedabove the image c posititon:fixed. If you use firebug, as I told you in the comment, you will see exactly css !

+1
source

This is a div with image that overlays the slide image. If you want to do something like this, you need to add a div before you go with this css:

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;
0
source

This will do the trick:

.slides .img
{
     background: url(images/slide1.png) no-repeat;
}

.slides .img:after {
                content: "";
                background: url(images/pattern.png) repeat scroll left top transparent;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                position: absolute;
                z-index: -1;
            }
0
source

More articles:


All Articles