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.
Click image below to view it live. I only developed it for the latest version of Chrome.
There is many ways you could do this, but below is a snippet of how I made it happen.
imgId = event.target.id;
$(“#” + imgId).css(‘top’, ‘-15px’);
$(“#” + imgId).css(‘top’, ’15px’);
font-family:Arial, Helvetica, sans-serif;
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: