Using CSS3 can you create this image masking effect? - html

Question

I've seen some cool image masking and other effects with CSS3. Using only CSS3 can we achieve this effect seen in the code below or see working fiddle.
http://jsfiddle.net/s6u9a/
HTML
<canvas id="canvas1" width="400" height="400"></canvas>
Javascript
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(img2, 0, 0);
}
var img = new Image();
img.onload = function() {
redraw({x: -450, y: -500})
}
img.src = 'http://placekitten.com/400/400';
var img2 = new Image();
img2.onload = function() {
redraw({x: -450, y: -500})
}
img2.src = 'http://placekitten.com/400/395';
function getMouse(e, canvas) {
var element = canvas,
offsetX = 0,
offsetY = 0,
mx, my;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {
x: mx,
y: my
};
}

Answer 1

Here's an alternate approach using background-image. It's more flexible, and you get a circular (or arbitrarily shaped) viewport:
http://jsfiddle.net/maackle/66uCs/
HTML
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<div class="overlay"></div>
</div>
CSS
.masker {
position: relative;
}
.overlay {
position: absolute;
display: none;
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://lorempixel.com/400/400/cats/2) no-repeat;
}
jQuery 1.10.1
$('.masker').on('mousemove', function (e) {
var r, x, y, top, left, bottom, right, attr, $base, $overlay;
r = 100;
$base = $(this).find('.base');
$overlay = $(this).find('.overlay');
x = e.pageX - $base.offset().left;
y = e.pageY - $base.offset().top;
top = y - r / 2;
left = x - r / 2;
if (x < 0 || y < 0 || x > $base.width() || y > $base.height()) {
$overlay.hide();
} else {
$overlay.show().css({
'background-position': '' + (-left) + 'px ' + (-top) + 'px',
'left': left,
'top': top
});
}
});
//just for good measure
$('.masker').on('mouseout', function (e) {
$(this).find('.overlay').hide();
});

Answer 2

Here's a solution that uses mostly CSS -- you do need some Javascript to detect the mouse position. Note that this gives you a square viewport instead of a circle, but if CSS ever adds circle() alongside rect() for the clip property, you will have that option:
http://jsfiddle.net/maackle/Yc2b4/
HTML
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<img class="overlay" src="http://lorempixel.com/400/400/cats/2" />
</div>
CSS
.masker {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
}
jQuery 1.10.1
$('.masker img').on('mousemove', function(e) {
var r, x, y, top, left, bottom, right, attr, $overlay;
r = 100;
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
top = y - r/2;
left = x - r/2;
bottom = y + r/2;
right = x + r/2;
attr = 'rect('+(top)+'px, '+(right)+'px, '+(bottom)+'px, '+(left)+'px)';
$overlay = $('.masker .overlay');
$overlay.show().css({clip: attr});
});
$('.masker img').on('mouseout', function(e) {
$('.masker .overlay').hide();
});