Tech fixes and hacks • DiGiztal

Some of you may like to have this zoom-in zoom-out effect on the images of your blog posts.

Or some call it image hover effect.

Simply it means when you hover your mouse cursor over or on top of the image, the picture will zoom out slightly.

And once the mouse cursor is moved out of the image, the picture zooms back to its original size.

See the zooming out effect below.

You just move your cursor over the picture below and then move it away from it.

Hover Image Zoom Out Effect Blogger

There are two main steps create this zoom hover effect.

Step One:

1. Firstly you need to paste this set of CSS code in the template.

2. Sign in with your Blogger Account.

3. At the Dashboard, click on "Template".

4. Next click on the orange color "Customize" button.

5. Click on "Advanced".

6. Then click on "Add CSS".

7. Now paste the CSS code below in the box provided.

/* Hover Image Zoom Out Effect Blogger By Kher Cheng Guan*/

/* Blog:https://digiztal.blogspot.com/2016/09/zoom-out-effect-cursor-hover-image-blogger.html */

.zoom img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
.zoom img:hover {
-o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

8. Click on the orange "Apply to Blog" button.

9. Then click "Back to Blogger".

Step Two:

To create the image zooming effect, you go to the image or picture of your blog post to do the editing.

1. Go to the post you want to create the zoom hover effect.

2. Click "Edit" to open the blog post editor.

3. That is the box where you write your blog post and paste your image.

4. Select "HTML".

5. Now look for the code of that particular image or picture which you want to do the cursor-hover-zoom effect.

6. Search for the line of code which looks something like this:

Note: The above code is just an example. Your code won't be exactly the same as this.

7. Add this: class= zoom img between <a and href.

8. This is how it should look like:

9. I have highlighted it in red color.

10. Finally click the orange color "Update" button.

11. That's all.

Now check and see whether the image will zoom out when you hover the cursor over the image.

And similarly it will zoom back to its original size when the cursor is moved out from the image or picture.

Note: You can fiddle with the zooming image size effect if you like. To adjust the zoom out size of the image, you need to change the digit (1.2) next to the word scale.

You can make it zoom out bigger, by changing it to (1.4).

September 30, 2016

Image Zoom-Out Effect When Cursor Hovers Over For Blogger

Hover Image Zoom Out Effect Blogger