Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Smooth Sliding Image Caption With CSS3

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Smooth Sliding Image Caption With CSS3

Smooth Sliding Image Caption With CSS3

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,331 views

Check out this pretty neat new design of an image caption from Bhavesh Pamecha! 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, this is to minimize distraction, explains Pamecha.

View Demo

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? Follow the steps below.

  • In your dashboard, under the Design page, go to Template and click on “Edit HTML” then “Proceed”.
  • Click to check the “Expand Widget Templates” box.
  • Using Ctrl+F, look for ]]</b:skin>
  • Copy and then paste the follow code below before it:
.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;

NOTE: If the caption’s not displaying properly, try adjusting bottom: 5px; and if you’re using larger images then adjust max-width: 400px;

  • Save the template.

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 in the example 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>

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. Cheers!

Liked It ? Please Share

Comments

3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. poekdex says:

    Hello! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing months of
    hard work due to no backup. Do you have any solutions to prevent hackers?

    my web page poekdex

  2. jn27 says:

    As a point actually, there are many individuals who generate their full-time residing on eBay and they keep growing their company in some rather exclusive methods. How to fight depression

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here