Animated Zoom With Caption Effect For Pictures On Blogger


CSS3 Logo 3D Blue
OK we all love image effects and we love them even more when they can be achieved using just CSS with no need for Javascripts.This effect not only added a neat slide out caption to your pictures but also the image will darken and zoom behind the caption.Check out the link to the demo below (Just hover over the Spice Up Your Blog screenshot on the demo page) and then I will show you just how easy it is.Make sure to watch the video tutorial at the foot of the post to see the effect being added to the demo.

Add Zoom Caption To Blogger

i In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Click Template from the options > Choose Customize > Advanced > Add Css, as shown in the video below.

ii Copy and Paste the following code into the Css Section then click Apply To Blog.

.titlezoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}
.titlezoom img{border:none;display:block;z-index:1}
.titlezoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.titlezoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}

Adding The Caption To Images

You now have the code in place for the caption to work now you just have to add two things to the images you want to have the caption.

First you need to add a class then you need to add the caption that will appear on hover.You can see exactly how it's done in the tutorial video below (Make sure to watch the video so you get them right) but here is a quick run down.

Add the class : When you upload an image to your posts go to HTML mode and add class="titlezoom" to the image code.

Add The Caption : The caption picks up your title text and uses it.The title text and class must be added in the anchor part of the code.

Video Tutorial

That's it with credit for the idea going to Basicuse.Drop Your Comments And Questions Below.

AuthorAbout The Author - is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Perfect just what I was looking for on my picture blog.

  2. Hello Paul,

    Seems like you've been playing with css and designing stuff during these month and I can lot of stuff regarding it.

    Thanks a lot for sharing with us,.

  3. It will surely look great if we use larger images.

  4. Works as described but images get messed up in lightbox. Any fix so lightbox will still work with 'titlezoom' images? Thanks.


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us