Tech fixes and hacks • DiGiztal

In one of my previous posts, I showed you how to create one type of hover image zoom out effect.

For that tutorial, when you hover your cursor over the picture, the whole complete picture enlarges or zooms out.

And when the cursor moves away from the image, the picture returns to its original size.

Try out and see the zooming out effect below.

But for this post, I am going to show you how to do another similar effect, but this time it is slightly different.

Now the zoom out effect is only within the image.

The picture frame (the four sides) will NOT be enlarged or moved outwards.

It is as if you bring a magnifying glass close towards a picture or photo.

In other words, the size of the picture remains the same.

It is only the inside part of image within the picture frame has the zooming out effect.

Put your cursor over the image below and see the effect.

Important: In order for this effect to work perfectly, the size (width and height) of the image used and the size (width and height) set in CSS code in .zoom-effect-container is crucial.

The size of the image configure in CSS code in .zoom-effect-container must be the SAME or SMALLER than the image size in your blog post.

Here is how you do it.

Step One: Add Containers To Image Code

1. After you have added an image to your blog post in the post editor, click on the HTML tab.

2. Among the text and other code, you should see this similar set of code for your image:

3. Firstly you need to delete away the top portion of the code.

4. Now it should look like this:

<img border="0" height="180" src="https://4.bp.blogspot.com/-qlYnJ3pvNQg/WD_b7yv2BmI/AAAAAAAAPiM/5lez4z_i3xYMEiq1i1mtB8b4MeEBbPjqwCEw/s320/two%2Blions.jpg" width="320" />

5. Then you add these two sets of containers (highlighted in red) within the image code.

<div class="zoom-effect-container">
<div class="image-card">

(Your image code is similar to the one above at #4)

</div></div>

6. After adding the two containers, the complete code now should look something like this:

<div class="zoom-effect-container"> <div class="image-card">
<img border="0" height="180" src="https://4.bp.blogspot.com/-qlYnJ3pvNQg/WD_b7yv2BmI/AAAAAAAAPiM/5lez4z_i3xYMEiq1i1mtB8b4MeEBbPjqwCEw/s320/two%2Blions.jpg" width="320" />
</div></div>

7. Now click the orange color "Update" button.

Step Two: CSS Code

1. Click on "Template".

2. Click on the orange color "Customize" button.

3. Then click On "Advanced".

4. Drag the vertical slider, until you see "Add CSS".

5. Click on "Add CSS".

6. A box will pop up on the right hand side.

7. Paste the set of code provided below onto the box.

.zoom-effect-container {
    float: center;
    position: relative;
    width: 320px;
    height: 180px;
    margin: 0 auto;
    overflow: hidden;
}

.image-card {
position: absolute;
top: 0;
left: 0;
}

.image-card img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}

.zoom-effect-container:hover .image-card img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}

Important: Make sure the width and the height values (px) written above should be the SAME or SMALLER as the values of your image width and height respectively, as I have mentioned above.

In other words, like my example shown above, the width is 320px and height is 180px, then as you can see in Step One, the image width is 320px and the height is 180px or slightly bigger.

8. Click the orange color "Apply to Blog".

9. Then click the link: "Back to Blogger".

Step Three: Remove Post Body Image Border And Padding

Note: Check if the whole image still moves when you hover your cursor over it or when you move the cursor away from it.

If it does, then you need to do Step Three.

For my example here, I am using the Simple Template designed By Josh Peterson.

By default, this template design has a border and padding around the post image area.

Meaning, there are spacing around the area surrounding the image.

You need to remove these spacing around the image area, by following Step Three.

This is what you do:

1. Click "Template".

2. Click the "Customize" button.

3. Click "Advanced".

4. Drag the vertical slider, until you see "Add CSS".

5. Click on "Add CSS".

6. A box pops up on the right side of the page.

7. Now paste the code provide below inside the box.

.post-body img {
padding:0px;
border: 0px;
}

8. Then click the "Apply to Blog" button.

9. That's all.

10. Now click "View Blog" link and see whether the zoom hover effect is working perfectly.

December 2, 2016

Cursor Hover Zoom-In Effect Within Image For Blogger/Blogspot