Animated Sliding Info Pop-Up With jQuery & CSS 3
This little idea could be used for a number of things. In my case it was used to provide more information about an image, but you could use it on a photography website to display the EXIF data of an image. Here is an image example of a similar version of this effect in use. I’ll provide a working example at the end.
The first thing we need to do is make some HTML suitable for creating this effect.
The HTML
The HTML is pretty simple. We just need a container, an image, and a container for our information, like so:
|
1 2 3 4 5 6 |
<div class="imgCont"> <img src="/path/to/img/" /> <div class="imgText"> Some text... </div> </div> |
As you can see the HTML is not very complicated. Remember, of course, to change the path of the image to something real. If you are using this in WordPress you could replace it with the_attached_image(); if you are using my plugin, or with the_post_thumbnail(); if you are using WP 2.9+ built in post image support.
Next let’s get on to some CSS. With this effect CSS is a pretty important part, without it the effect will not work correctly.
The CSS
The CSS for this is also pretty simple, it’s just really important. It sets the default position of the element which hides it from view, along with setting the container to a relative position. Let’s take a look:
|
1 2 3 4 5 6 7 8 9 10 11 |
.imgCont { position: relative; overflow: hidden; } .imgText { position: absolute; bottom: -30px; height: 25px; width: 600px; padding: 5px 0 0 0; } |
Okay. As I said we need to make the Image’s container positioned relative & it’s overflow hidden. This means we can position elements inside relative to the outer container (even though they are set to absolute), the overflow being hidden means it will hide our message if it’s position is moved to somewhere outside of the element’s viewable area.
We position our text element 30px out of the bottom of our container element so it is hidden from view when the page loads. You must set a height to the element & the bottom property is figured out by taking the height of your element plus any top or bottom padding you have set. In this case that is 25 (height) + 5 (padding top) = 30px. Also remember to give a width, things won’t look right if you don’t.
Now to make our element animate. I am going to have it hover when the image is hovered, but you could attach the animation to something like a click event.
The jQuery
The jQuery that makes this work is fairly similar to code you might have used before, and if you haven’t then don’t worry it’s easy to understand.
|
1 2 3 4 5 6 7 |
jQuery(function($) { $('.imgCont').hover(function() { $(this).children(1).animate({bottom:'0px'}, {queue:false, duration:500}); }, function() { $(this).children(1).animate({bottom:'-30px'}, {queue:false, duration:500}); }); }); |
First we have our standard document ready event. As usual I use the no conflict version due to normally working in WordPress. As I said I am using a hover event, so we attach a hover event to .imgCont which is our image container.
In our mouse over, the first parameter in the hover event, we select the second child element (1 is the second since computers count from 0) and animate it’s bottom position back to 0 pixels to show it. We disable the queue to help stop hover abuse & set how long we want the animation to take in milliseconds.
In our mouse out, the second parameter in the hover event, we do exactly the same as before except we move our bottom position back to -30 pixels.
Here is a little example:
I thought I’d make this example an opportunity to advertise the brilliant Firefox.
Where is the CSS 3?
Ahhh yes. Well let’s take a look at the full CSS I used to make the example above.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.imgCont { position: relative; overflow: hidden; } .imgText { position: absolute; bottom: -30px; height: 25px; width: 600px; padding: 5px 0 0 0; background: rgba(0, 0, 0, 0.6); color: white; text-align: center; } |
The tricky part is making the background semi-transparent. While it’s not necessary, it adds a little bit of excitement. You could use a transparent PNG and a PNG fix for IE, but if you are willing to ditch Internet Explorer (except for IE 9) completely you can always use RGBA as I have. If you are desperate for IE to be able to see your transparent handywork then you could always check out this post on how to make RGBA work in IE.
That’s it. I hope this post has been useful. If you have anything to add or you have a question please let me know via the comments.0
