Beautiful CSS/jQuery hover Effects – 2

This is the second post in the series of posts featuring some awesome hover effects.
In this one, I decided to feature the parallax effect on hover.

It is not an original effect as I have seen multiple uses of this effect via various jQuery plugins. But finding the code for it, on the other hand, was not that easy. I browsed through some Q & A on www.stackoverflow.com but did not find a suitable solution to it.
Finally, by hit and trial and doing a bit of research, I came up with the following effect. So here goes.

This is the demo of the effect we want to achieve –

This is the HTML markup for the following tutorial-

<div id="thumbnail">
<div class="thumb-bg">
</div>
</div>

It is a rather obvious one. The thumbnail div acts as container and the thumb-bg div acts as the background layer.

Below is the CSS which is applied to the following layers-

#thumbnail {
position: relative;
overflow: hidden;
display: inline-block;
border: solid 3px #ddd;
}

.thumb-bg {
position: relative;
background: url("http://yoursite.com/yourpic.jpg");
margin: 0px;
height: 198px;
width: 300px;
transform: scale(1.1, 1.1);
}

Here, I think the only thing that might be a bit tricky was the dimensions of the thumbnail. I made the dimensions equal to the thumbnail image. I had to fix them.
If anybody comes up with the code to make the div thumbnail height adjustable, kindly comment it out below.

Here is the jQuery code, responsible for the magic that ensues-

jQuery(document).ready(function() {
	jQuery(".thumbnail").mousemove(function(e) {
		var offset = jQuery(this).offset();
		var W = e.pageX - offset.left;
		var H = e.pageY - offset.top;
		jQuery('.thumb-bg').animate({top: -H/20, left: -W/20}, {duration: 50, queue: false, easing: 'linear'});
	});
});

Here, the position of cursor is stored in variables W( for the X-axis ) and H( for the Y-axis ). These variables are then used to animate the div .

Hope its clear enough and you all learnt something from it.
If you have any suggestions or feedback, kindly leave them in the comments section.

Also, check out the first article of the series-
http://www.divjot.co/beautiful-css-hover-effects-1

One thought on “Beautiful CSS/jQuery hover Effects – 2

Leave a Reply

Your email address will not be published. Required fields are marked *