Tech fixes and hacks • DiGiztal

I have already shown you how to do two versions of zoom-in effects for Blooger/Blogspot blog.

This post is another kind of zoom-in effect.

When you hover your cursor over the image or picture, it zooms in, enlarging and at the same time, it moves downwards to the right side.

The whole image outline doesn't move just like the second zoom-in effect which was published in the last post.

Then as you move away your cursor from the image, it moves back and shrinks to its normal size again.

Try the effect below.

Zoom-In Enlarging Image Moving Downward Effect

Here is how you do it.

Step One: Add DIV Container To Image

1. After you have uploaded your picture, you need to add this div container within the image code.

<div class="zoomin frame">
(Image code)
</div>

2. After you have uploaded the picture, click the HTML tab, and you would see a similar image code like this:

3. Remove or delete the top portion of the code and the closing </a> tag. Now the code should look like this:

<img border="0" src="https://3.bp.blogspot.com/-SLPkbdUuEDE/WEU9_L-SCaI/AAAAAAAAPks/UKVxCeup_oMw7ccuQprlQEmGbHlAGe6GACLcB/s1600/zoomin%2Benlarge%2Beffect.jpg" />

4. Add the div container within this code.

5. Now it should look like this:

<div class="zoomin frame">
<img border="0" src="https://3.bp.blogspot.com/-SLPkbdUuEDE/WEU9_L-SCaI/AAAAAAAAPks/UKVxCeup_oMw7ccuQprlQEmGbHlAGe6GACLcB/s1600/zoomin%2Benlarge%2Beffect.jpg" />
</div>

6. To centralize the image, add the <center> and </center> tags between the above code.

7. After adding the center align tags, now the code looks like this:

<center>
<div class="zoomin frame"><img border="0" src="https://3.bp.blogspot.com/-SLPkbdUuEDE/WEU9_L-SCaI/AAAAAAAAPks/UKVxCeup_oMw7ccuQprlQEmGbHlAGe6GACLcB/s1600/zoomin%2Benlarge%2Beffect.jpg" />
</div></center>

8. Click the "Publish" button.

Important: You need to know the size of your uploaded image.

To get the image dimensions (width and height), you just right click on the image, a menu box will pop up.

Click on "View Image Info".

A box together with the image will pop up and you can see the size listed in "Dimensions".

Step Two: Add CSS Code

1. Click "Template".

2. Click "Customize" button.

3. Drag the vertical slider until you can see "Add CSS".

4. Click on "Add CSS".

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

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

.frame { height: 200px; width: 200px; overflow: hidden; } .zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { width: 300px; height: 300px; }

Note: The code above is just an example.

You need to change the height: 200px and width: 200px to the actual dimensions of your image.

To get the hover enlarge zoom-in effect, you need to change the zoomin img: hover width 300px and height: 300px to other value.

To get a reasonably good zoom-in effect, increase this values to another 100px to both width and height.

For example if your image dimensions are: width is 300px and height 150px, then the value of zoomin img: hover, the width is 400px and the height is 250px.

So now your CSS code should be like this:

.frame { height: 300px; width: 150px; overflow: hidden; } .zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { width: 400px; height: 250px; }

The "2s" is the speed of the enlarging and reducing movement effect.

You can play with other value of your choice.

7. Finally click the "Apply to Blog" button.

December 5, 2016

Hover Zoom-In Image Moving Downward Effect For Blogger

Zoom-In Enlarging Image Moving Downward Effect