Looking for an interesting way to add callouts to your website to attract attention and direct the user of the website to certain services? Check out this demo to see how jQuery can be used to create “sliding boxes and captions”.
The concept behind the sliding boxes and captions is pretty easy. Check out the image below to see what’s going on. There is a div with a border and shadow which contains an image. On top of the image there is a div (the caption) which has a background color, a border, some text, links, and other elements with background images. The opacity has been lowered on the background color so the image can shine through the div.
On the default state the caption div is hidden partially out of view. When the outside div is hovered over the caption div slides up into view, giving access to all the content within it. When you move your mouse off the div the caption slides back down to the initial state.
I love using jQuery and CSS to create subtle effects on websites. I’ve been using a lot of jQuery sliders on client’s website lately, but I really like this simple effect. The original code came from the guys at Build Internet. Make sure to check them out.
I’ve created a zip file above with the demo files for your download. Download, edit, and use however you want. The code isn’t the cleanest because I was in a hurry to get the demo up, but it won’t take long for you to tighten the CSS up. Enjoy!
