Image Slide Using jQuery

A few days ago, I was looking at some portfolios for inspiration and ran across a cool effect when the mouse hovered over a image. When you hovered over the image, the image would slide up and display a caption. I thought it would be fun to see if I could replicate it, except the easing part, which could be done using jQuery or with CSS3, I think.Having that goal in mind and without looking at the source code of the website, I thought I try it, so I could use it later on.

 

Those of you out there that are interested in learning or improving their skills with Javascript, surfing the web and looking for little effects and trying to replicate them is a great way to learn Javascript and jQuery or any programming language for that matter.

 

Click image below to view it live. I only developed it for the latest version of Chrome.

Image Shift Using jQuery

There is many ways you could do this, but below is a snippet of how I made it happen.

 

Javascript
$(‘img’).mouseover(function() {
imgId = event.target.id;
$(“#” + imgId).css(‘top’, ‘-15px’);
});

$(‘img’).mouseleave(function() {
$(“#” + imgId).css(‘top’, ’15px’);
});

 

CSS
.mycaption{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666;
z-index:1;
}

img{
position:relative;
z-index:5;
top:15px;
}

 

What Does This Do?
The way I approached this is by setting all the images down 15 pixels and cover it by using z-index. With the help of jQuery, on mouseover, get the id of the target and move up15 pixels to display the caption. When the mouse leaves the image, run mouseleave and put the image back to where it started.

 

Credit & Inspiration:
http://youssef-habchi.com/