Adding a dividing effect to an image is almost easy with jQuery, provided that you undestand that jQuery is not Flash, so you don't have to expect some stunning effect, but just some nice touch when it's needed wink. Anyway, to accomplish this task, we start with a basic image contained within a block-level element. We want the containing block of the image to be divided in four smaller blocks with a semi-transparent content inside.
First, we should create a simple jQuery plugin that splits our block into four components. It is as follows:
(function($) {
$.fn.divide = function(options) {
options = options || {};
options.parent = options.parent || this.parent();
options.parts = options.parts || 4;
options.speed = options.speed || 500;
options.content = options.content || '';
options.opacity = options.opacity || 1;
var i = 0;
var width = Math.floor(this.width() / 2);
var height = Math.floor(this.height() / 2);
do {
i += 1;
var part = '<div class="part part'+ i + '"/>';
$(part).appendTo(options.parent).animate({
width: width,
height: height,
opacity: options.opacity
}, options.speed, function() {
$(this).html(options.content);
});
} while(i < options.parts);
};
})(jQuery);
This plugin splits our block using its parts option and add a progressive CSS class to each component. Then it animates these components using the animate() method. Our CSS is as follows:
#container {
width: 533px;
height: 350px;
margin: 2em auto;
position: relative;
}
#test {
width: 533px;
height: 350px;
display: block;
cursor: pointer;
}
.part1 {
background: yellow;
left: 0;
top: 0;
}
.part2 {
background: silver;
top: 0;
right: 0;
}
.part3 {
background: orange;
bottom: 0;
left: 0;
}
.part4 {
background: teal;
bottom: 0;
right: 0;
}
.part {
position: absolute;
}
.part img {
width: 100px;
height: 100px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
As you can see, each component will be absolutely positioned within the image container. Now let's test it:
$(document).ready(function() {
$('#container #test').click(function() {
$(this).divide({
speed: 700,
content: '<img src="http://dev.css-zibaldone.com/onwebdev/img/chrome.png" />',
opacity: '0.6'
});
});
});
You can see a demo below.