How To Create A Dotted Shadowy Effect On An Image With Css?

April 05, 2024 Post a Comment

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

Solution 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><divid="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, #77725%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #77725%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #77775%), -webkit-linear-gradient(-45deg, #00075%, #77775%);

    background-size:2px2px;
    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: 00, 2px2px, center center;
    background-size:4px4px, 4px4px, 600px600px;
    width:400px;
    height:400px;

    -webkit-transition:opacity 2s;
}

Solution 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!

Solution 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.

Baca Juga

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.

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

Solution 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?

Html5 Dictionary