Add Zooming Effect and Drop shadows on Images with CSS3

Add Zooming Effect and Drop shadows on Images with CSS3

Comments: 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.  

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *