php - How to create a dotted shadowy effect on an image with CSS?

Question

I would like to create the effect that can be seen on the website http://www.murmure.me/ when you hover on their images.

I know They use two different images but I would like to be able to this effect without 2 images, just with ONE picture (the one without the dots) and by using CSS. Is it possible ?

Answer 1

This is pretty close: http://jsfiddle.net/LfXN3/8/

But, it requires a second element (not image, just element). The pseudo-element approach wasn't working because the opacity of it couldn't be animated.

<div>
    <div id="overlay"></div>
</div>?

CSS

div{
    background:url(http://placekitten.com/600/600) center center;
    width:400px;
    height:400px;

    -webkit-transition:all 2s;
    -webkit-filter: grayscale(100%);
}

div:hover{
    -webkit-filter: grayscale(0%);
}

div #overlay{
    opacity:.5;
    display:block;
    background: -webkit-linear-gradient(45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #777 75%), -webkit-linear-gradient(-45deg, #000 75%, #777 75%);

    background-size:2px 2px;
    width:400px;
    height:400px;

    -webkit-transition:opcaity 2s;
}

div:hover #overlay{
    opacity:0;   
}

I've managed to get that tiny bit closer by incorporating Dudley Storey's technique into mine: http://jsfiddle.net/LfXN3/14/

The main difference being this:

div #overlay{
    opacity:1;
    display:block;
    background: -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
    url(http://placekitten.com/600/600);
    background-position: 0 0, 2px 2px, center center;
    background-size:4px 4px, 4px 4px, 600px 600px;
    width:400px;
    height:400px;

    -webkit-transition:opacity 2s;
}