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;
}

Answer 2

Yep, can be done with a single image, using plain CSS3 and a filter: demo, and a brief explanation, on my blog . Right now the greyscale-to-color transition seems especially slow in Firefox (as it has to use the SVG equivalent to the filter), so I've removed it from the demo for the time being.

div#silkscreen {
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(lotus.jpg);
background: -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg);
background-position: 0 0, 2px 2px;
background-size:4px 4px, 4px 4px, cover;
-webkit-filter: grayscale(1);
filter: url(desaturate.svg#greyscale);
filter: grayscale(1);
transition: 1.3s;
}
div#silkscreen:hover { -webkit-filter: grayscale(0); filter: none; }
div#silkscreen img { max-width: 100%; opacity: 0; }}
div#silkscreen:hover { -webkit-filter: grayscale(0); }
div#silkscreen img { max-width: 100%; opacity: 0; }

<div id=silkscreen>
<img src=lotus.jpg alt="">
</div>

I hope this helps!

Answer 3

Mikel, you can't achieve a silk-screen effect using CSS and a single image.
It's not going to happen any time soon, in any cross-browser compatible way.

Maybe, eventually, when you can custom-program CSS filters using HLSL or similar...
But for the time-being, even with near-ish-future CSS-filters, I don't think that they're going to offer silk-screen, and THEN, you'd need to worry about that, along with the transition effects, and THEN you'd need to worry about browser support, with 2-image fallbacks for other browsers...

ie: you'd have to create the 2nd image and write the 2-image fallback which you were hoping there was a CSS filter for, to avoid making the 2nd image, in the first place.

Answer 4

Whilst it is possible to convert a colour image to greyscale using the css3 greyscale filter, it currently only works in Chrome.

-webkit-filter: grayscale(100%);

A workaround to get that effect without the use of jQuery is to use two images and css3 transitions.

-webkit-transition: opacity 0.5s;
-moz-transition:    opacity 0.5s;
-o-transition:      opacity 0.5s;

Answer 5

How about using the original picture (without the dots) and another image just made of a single small dot (something like http://www.scottecatalog.com/images.nsf/Images/dot/ $FILE/Dot.gif) and with a repeat attribute, repeat the dot all over the original image with the right space between the dots and with z-index property (so that the dots are placed in font of the original image)?

We are still using 2 pictures but at least it would be easy to replicate this effect for any image, whatever original image you have under it. Would that make sense?

Answer 6

Thanks for your interest on our website.

You may use a sprite technique.

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html used also on the image of "DECOUVREZ LA PROGRAMMATION" on http://nordik.org/

very simple tu use ;)