Add Zooming Effect and Drop shadows on Images with CSS3

Add Zooming Effect and Drop shadows on Images with CSS3

1
data:blog.title
Image tricks

I am going to share a simple but very useful trick for BloggerSpice readers. Just a simple trick to create or add zooming effect and drop shadows on images with CSS . You can apply this trick on a specific Image that will make your blog more attractive.  If you are interested in adding this effect on your blog or your post, it is very easy, just follow these steps:


Live Demo


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.

/* Zooming Effects by www.bloggerspice.com*/
.BS-Zoom img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.BS-Zoom img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

How to Use?

Well now we will learn how to make this work. When you will go for add this effect just  add the following piece of code.

<div class="BS-Zoom">
<img src="Image URL Here" />
</div>
  • Change Image URL Here this line with your image URL.  
Add Zooming Effect and Drop shadows on Images with CSS3
4 Stars stars - "Add Zooming Effect and Drop shadows on Images with CSS3" I am going to share a simple but very useful trick for BloggerSpice readers. Just a simple ...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *