This is best CSS3 trick to add an animated description panel to images that slides open when the mouse rolls over the image using CSS3 transitions.If you want to add some description to any image then this trick will surely help you,when any visitor mouse hovers on image the animated panel smoothly comes out with description which you have added.The biggest advantage of this trick is it works with a pure CSS3 i.e. no any heavy JavaScript or any jQuery which can affects loading speed of your blog.Below are the some best feature of this CSS3 trick -

  1. Works with pure CSS3 i.e. no any heavy scripts is needed
  2. Can be use in 4 ways (Up,Down,Left,Down)
  3. Smooth hover effect.
  4. Easy to use and some other features.
Above are the some features of this trick,now lets see how to add use it,first see the demo of down panel below,

Live Demo ▼


How To Add Sliding Description Panel To Images?

First we will add CSS code to blog,follow below instruction to add css code,

  1. First go to Blogger Dashboard > Template
  2. Click On Edit HTML 
  3. Hit Proceed button
  4. Now find for below code in your template

]]></b:skin>

add below code just above/befor of above code,

/*================ Sliding Description Panel For Images By HelperBlogger ================*/

.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}

.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/*================ Sliding Description Panel For Images By HelperBlogger ================*/

How To Use It?

While editing post,

  1.  Go to Edit HTML tab 
  2. Add below below code,

<center><div class="imagepluscontainer" style="width:263px;">
<img src="IMAGE URL HERE">
<div class="desc downslide">
ADD YOUR DESCRIPTION HERE
</div>
</div></center>

  • Now replace ADD YOUR DESCRIPTION HERE with your description,you can also add links in your description by using this code <a herf="LINK HERE">TEXT HERE</a>
  • Replace IMAGE URL HERE with your image URL
  • If you want to change position of sliding panel then just replace highlighted down with up,right or left
  • Adjust the width of the panel according to image width to adjust width of panel simply edit width:263px;

I hope you have liked i,also post your comments about trick and credits for this goes to dynamicdrive.

Post a Comment

  1. Thank You for your nice info. All the info of your blog are really important for all of us. I am also blogger and its help me many time. :) Thanks. Will visit again.

    ReplyDelete
  2. nice post...
    u r providing good information....

    ReplyDelete
  3. where i should add the code wch u have given in "how to use it"??

    ReplyDelete
  4. Very useful tutorial, helping great.

    ReplyDelete
  5. Nice thing for describing images I shall try it for my blog
    http://profitclickingreviewz.blogspot.com
    thanks once againg

    ReplyDelete
  6. I've found quite a few useful items on your site. I appreciate them and just want to say keep up the good work!

    ReplyDelete
  7. Thanks it really worked. I had a question, how to speed up the Description to show up? because it's really slow. Can you please help me?

    ReplyDelete
  8. One thing which needs to improvement is that blank space around image do not look good. Can you do something about it.

    ReplyDelete
  9. Wow certainly glad I found your blog as I am already convinced that it is going to be of much help to me and my blogs. AWESOME!

    ReplyDelete
  10. Very Nice
    It Worked
    Please Visit My Blog
    http://malayalammoviedata.blogspot.in/

    ReplyDelete
  11. Olá, em {<a ((((herf))))="LINK ....} na descrição está incoreto.
    O Correto é {<a ((((href))))="LINK ......}

    ReplyDelete
  12. Hello, in {<a ((((herf)))) = "LINK ....} the description is incoreto.
    The Right is {<a ((((href)))) = "LINK ......}

    ReplyDelete
  13. thanks FOR HELP makeblogwithgoogle.blogspot.com

    ReplyDelete
  14. Great sharing really appreciated but ere is a problem it is not working look here and kindly help me about this one www.animeipics.com

    ReplyDelete
  15. great article really helpful.......

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top