Photo Stack Effect Using Only CSS3

There's a lot of buzz around the web about Google plus! I'm sure many, including me, are fascinated about circles! Well, did you find time to check out the other sections - albums on Google+? If not, try it now! You'll find a cool transition effect on hovering your mouse over the albums! Inspired by this, I googled about the same & found a solution to get it work on Blogger. Take a look at the demo here.

PHOTO STACK EFFECT - LIVE DEMO (LOOK AT THE SIDEBAR ON DEMO BLOG)

The main advantage with the above hack is that it works purely with CSS3. No Javascript nor Jquery - only CSS! However, there is one main disadvantage working with pure CSS3 - browser compatibility issues! The above hack works only on browsers that support CSS3! I'll try to get the same effect working on all browsers, with a gradual transition rather than the abrupt change, using Jquery in the upcoming weeks! Anyway, let's get started with this tutorial now...

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Download the following text document - CSS FOR PHOTO STACK EFFECT and paste the code present in it just above the line mentioned step 1.

3. Save your template. To realize the stack effect, declare image tags with class="photo1", class="photo2" and class="image3" respectively. Then, wrap them with an anchor tag using class="album". That's it! Difficult to understand? Then, paste the following code anywhere on your template to realize the final effect.

Note: Replace IMAGE URL highlighted in blue with your image URLs to realize the stack effect on your blog. If you wish to extend the same effect for more than 3 photos, then ping me via gtalk or leave a comment, I'll help out to achieve the same!

4. Save your template and view the same on a browser that supports CSS3 - possibly using FF3+!

Over the past few weeks, I've been trying to post articles that are pretty unique on blogger. I would like to receive your opinion about the same. I hope you enjoy the articles on my blog including the one above! Please share your views about the same via comments:) Check out the other interesting tutorials on CSS here - CSS Tricks

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Anonymous

this is a unique post and i will apply this in my blog as soon as possible. Thanks for posting.

Mukund said on August 1, 2011 at 2:41 PM :

@Anonymous: Yup! Thanks for the comment! I would be happy if you leave your name and URL, the next time you comment:)

Geet said on August 1, 2011 at 6:07 PM :

An excellent tip. I'll implement this at my art & craft blog.

Mukund said on August 1, 2011 at 6:37 PM :

@Geet: Yup! Thanks for the comment! I a had look at your blog and it looks great! Your template is not that good as your works are! Take it as my opinion buddy!

SHREE MADHAN said on August 1, 2011 at 6:48 PM :

lookin good
http://smahkin.blogspot.com/

Mukund said on August 1, 2011 at 9:13 PM :

@SHREE MADHAN: Please make your comments more descriptive than just dropping a link! Anyway, thanks for the comment!

Bharvi said on August 3, 2011 at 1:54 PM :

wonderful post mukund .. .. But i just want to ask a question...cauld u please give me the customisation of revolution church template version 2 (V2) ...my email id : bharvi_100[AT]yahoo.co.in....expecting an earliest reply from you .. . .hope u'll help me

Mukund said on August 3, 2011 at 3:58 PM :

@Bharvi: I don't know what you mean by customization of revolution church template version 2?? I just know only one version of the same which I'm using on my blog!

M.Pinto @ ProHacker said on August 5, 2011 at 8:46 AM :

Your blog is really useful in tweaking my site..

Thanks a lot for all your useful tips-tricks-scripts & everything!!

I just loved your blog..

Mukund said on August 5, 2011 at 10:01 AM :

@M.Pinto @ ProHacker: Well, thanks for the comment buddy! I hope you share the same with your blogging friends and enjoy the upcoming articles as well!

Anirudh@ExceptNothing said on September 8, 2011 at 11:44 AM :

Superb Post ! Thanks for Sharing !

Mukund said on September 8, 2011 at 1:48 PM :

@Anirudh@ExceptNothing: Thanks for the comment buddy! I hope you enjoy the other tricks on my blog as well!

adithya

munkund i hav an idea to make the coding for this effect simple.
instead of using rotation tag in css we can hover an already stacked polaroid image.the stacked polaroid of any image can be achieved through the site http://www.drpic.com/

Mukund said on September 9, 2011 at 11:32 AM :

@adithya: Yeah! I'll check out the same service and probably let you know if it's good! However, these are effects which are put up to make your blog more unique and attractive. Something to learn about CSS than using a service:)

Anirudh said on January 18, 2012 at 10:24 AM :

Great Thinking . Superb Effect . Can you please say me how to add this effect for Wordpress ?

Mukund said on March 3, 2012 at 3:12 PM :

@Anirudh: I'm not sure about that buddy! I'm not a php (WP) geek! But, it should work with the codes mentioned above.

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT