Home/ Questions/Q 8804033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T01:29:58+00:00

I would like to create the effect that can be seen on the website

  • 0

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 replicate this kind of visual effect without 2 images, just by using ONE picture (the one without the dots) and by using using javascript/jquery. Is it possible ?

This question follows the original one which tried to solve the issue with CSS, but it seemed impossible, or only on too few browsers : How to create a dotted shadowy effect on an image with CSS?)

Thank you for your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ll suggest you to search for canvas element in html5, supported in all modern browsers.

    As canvas is subject to cross domain policy for media (even image), i cannot set you a jsfiddle sample.
    So i set you a sample here to give you the idea: HERE

    Here is the source code:

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas</title>

<style type="text/css">
img{position:absolute;}
canvas{display:none;position:absolute;z-index:100;}
</style>

</head>

<body>
 <img src="beach_volley_layout.jpg"></img>   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var canvas;
$('img').mouseover(function(){

    canvas = createCanvasOverlay(this);
    $(canvas).fadeIn(600);
}).mouseout(function(){
    $(canvas).fadeOut(600);
});

function createCanvasOverlay(image) {

    var canvas = document.createElement('canvas'),
        canvasContext = canvas.getContext("2d");

    // Make it the same size as the image
    canvas.width = image.width;
    canvas.height = image.height;

    // Drawing the default version of the image on the canvas:
    canvasContext.drawImage(image, 0, 0);


    // Taking the image data and storing it in the imageData array:
    var imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height),
        data = imageData.data;

    // Loop through all the pixels in the imageData array, and modify
    // the red, green, and blue color values.
    for (var i = 0, z = data.length; i < z; i++) {

        // The values for red, green and blue are consecutive elements
        // in the imageData array. We modify the three of them at once:
        data[i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : 20);
        data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
        data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : 20);

        // After the RGB elements is the alpha value, but we leave it the same.
        ++i;
    }

    // Putting the modified imageData back to the canvas.
    canvasContext.putImageData(imageData, 0, 0);

    // Inserting the canvas in the DOM, before the image:
    image.parentNode.insertBefore(canvas, image);

    return canvas;
}
</script>
</body>
</html>
    • 0