Blogger: Customizing appearance of enlarged image which appears on clicking an image in the blog

Question

When we have multiple images in the blog and if we click any of those images, blogger enlarges that image. When we click the enlarged image, it shows next enlarged image, and so on.

Is there any way to customize appearance of the enlarged image? At the moment, my image in blog is shadowed (I am using 'box-shadow' style) but when it enlarges its without shadow.

I tried putting 'box-shadow' style in 'href' but no luck.

Answer 1

Well, I found the answer on my own. Just putting here in hope it will help someone coming here.

The images in blog enlarged after clicking, and displayed one by one is done by Blogger's Lightbox feature. We can customize the enlarged images (e.g. we can make them round cornered, put shadow to them etc.) by doing this:

1. Go in bloggers HTML editor of template

2. Search using CTRL + F the tag < /head> (No space between '<' and '/')

3. Just above the tag, add the following code:

<style>
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 11px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 3px 3px 7px #888;
}
</style>

For more details please refer this:

http://helplogger.blogspot.in/2013/03/how-to-customize-bloggers-lightbox.html