Creating Zoom Effect Image

Ponerah- Image zoom effect could be an attraction that can be used on the page of a blog. In addition to beautify the appearance of the blog, also can make the post more interesting with the picture that will automatically expand when the pointer is directed at the picture.

If you are interested in this trick, you can follow the steps to create the zoom effect image below:

1. Login to your blog

2. Select Layout and click Edit HTML

3. Check the box "Expand Widget Templates"

3. Find this code ]]></b:skin>

4. Copy the code below and enter the code above ]]></b:skin>

.zoom:hover{
-moz-transform:scale(1.98);
-webkit-transform:scale(1.98);
}

5. Then save template
6. After that go on blog postings and select edit HTML
Example usage code in posts:

<div style="text-align: center;">
<img class="zoom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMNFIT_fSxfV6_Sexd2wt5im6XkhX1kehVpu-esrS0KE1vYUOW10ddvoeVmiH9FrKU13wlhort_YniOUKH60HzjRALFxaS1uAta_eeImphhaqE67WPHzDju8ZJm2pjTS0mP3sHt8l0pY/s320/SAZLINA_COMP.gif" width="100" /></div>

The results

Note:

Green color, code for the zoom size image

Blue code command to enlarge image, Enter code if you want your picture zoom

Good luck.

Success for us all

Read more »