OK over the next week or so I want to focus on some cool image effects for the images you use in your blog posts. Previously we have shown you some basic effects you can add to images on your blog. But with the advancement of CSS we can now use better effects with less code and all in a way even an absolute beginner can do it. Also I will be presenting this in a way that once the code is added the effect will be on only images within your posts. We will be adding some more fancy effects in the next few posts but we will start with a neat zoom.
The first effect we will cover is a nice zoom were upon the image will be displayed as normal then when you place the cursor over it the image grows to a zoom.This is a good effect in two ways, if you actually want visitors to be able to zoom into your images or if you just want something that looks cool.
Check out the demo below (On the demo page hover over any of the images in the post) :
Add Css Zoom Effect To Blogger
Step 1. – In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.
Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
(Note : Some people have found the “Apply To Blog” button can not be clicked if so after the code click space)
/* CSS image zoom effect http://www.spiceupyourblog.com */
.post img {
height: 100%;
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect http://www.spiceupyourblog.com */That’s the effect added, easy. Drop your comments and questions below.
Author – Paul Crowe 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.
