Smooth Sliding Image Caption With CSS3 ~ CSE Rockz

Check Out this Pretty Cool Sliding Caption For Images It’s a caption that slides out at the bottom of the image only when the user moves his mouse cursor over anywhere near a small question mark located at the bottom of the image.

So far, the effect works without a problem with the latest version of Chrome, FireFox, and Opera but not with Internet Explorer. It hasn’t been tested on Safari yet.

So how do you install it to your blog?

Following are the simple steps to add the Styling :.

Go to Template >> Edit Html << Proceed, then check Expand Widget Templates.
Now Search for the ]]></b:skin> Tag in Your Template
Now Copy the Below Code and Paste it Above/Before ]]></b:skin> Tag.

.capblock { display: block; position: relative; overflow: hidden; margin: 0 20px 20px 0;}.capblock a { color: #fff; text-decoration: none;}.capblock a:hover { color: #ccc; text-decoration: none;}.tbicap { position: absolute; color: #fff; text-decoration: none; background: #000; background: rgba(0,0,0,0.75); padding: 10px 10px; bottom: 5px; left: -10%; max-width: 400px; overflow: hidden; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.tbicap:hover { left: 0; opacity: 1;}.capblock:before { content: "?"; position: absolute; font-weight: 800; background: #000; background: rgba(255,255,255,0.75); text-shadow: 0 0 5px #fff; color: #000; width: 24px; height: 24px; bottom: 10px; left: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75;}.capblock:hover:before { opacity: 0;}

Now Save the Template and You're Done.

Note:- If the Caption is not Displaying Correctly then try to Adjust the Max-width :400px

HOW TO Use This For Images :.

If the Caption To Use the New Sliding Caption On an Image in Your Post,Just Make Sure that You're in HTML Mode as You Enclose Your Image Inside Tags With the Proper Attributes. As Shown Below

<div>
<a href="IMAGE LINK HERE" target="_blank"><img alt="" src="IMAGE URL HERE"/></a>
<div>
<span><a href="POST LINK HERE">CAPTION HERE</a></span></div>
</div>

Now Remember to replace all the necessary values with that of your own. Also, you can remove the <a href=”POST LINK HERE“> and </a> if you just want the caption without the link to render it unclickable.

Hope you guys enjoy this featured Blogger trick of the day.

Via AllBlog Tools

CSE Rockz