Creating a jQuery Slide-Up Picture Description
With the popularity of Pinterest, giving photo credits has been put in the spotlight. If you’re looking for a clean way of displaying your photo credits (or description), a jQuery Slide-up Div is a great option.
Inspiration: http://www.stylemepretty.com/2012/07/19/white-wedding-photo-shoot-by-momental-designs/
The Finished Product:
The HTML & CSS
The most important part of the HTML is adding a parent DIV around the image. This allows us to add a “boxTop” Div that will be positioned absolutely above the image. Without the “position:relative” on the parent DIV “Images” or without that parent DIV, that absolute Div would be positioned according to the website’s upper left corner.
We set the height and the width of the outline or parent DIV “Images”, and then let the other DIV’s inherit their height and width.
We’ll need to hide the Description box at first, so the “boxTop” DIV will have an “overflow:hidden”, and the “Description” DIV will have “position:absolute;” and will start at “top:-50px;”. Note that the value of “top” will be related to the value of the height of the “Description” DIV.
In the example, I left a little of the description area showing, but you could get rid of that completely by moving the “top” down another 10 pixels.
The jQuery
The jQuery is really simple: just a little hover function. If you haven’t used the jQuery Hover function, check out this post.
A few things to know about the way the jQuery was coded. I used classes, not IDs for the Divs so that we could apply it to all of the pictures on the page (not shown in this post, but possible). Additionally, after telling it which class, we’ll use the jQuery “this” function to tell it which one we’re talking about.
Then we use the “.find” jQuery function to find the descendent of “this” element that has been hovered over that has the class “description”.
And there you go! I nice hover effect!
Posts You Might Like:
Write a comment
