My imagination are strong enough for me to hold on.
Hello 2017

#Tutorial : Image Zoom-In effect(Hover)
Monday, 14 December 2015 @ 21:10



Hover this Image

Hey guys!! This tutorial might help other tutorial blogger!!
I wonder if people can't see clearly of my tutorial example picture
What should I do?

So now I found this tutorial to help myself out
You guys don't have to open the image in new tab to see it clear
You guys can just simply move your mouse to the image and the image will hover automatically to zoom in the image
I hope this tutorial might help!!

1.Open your Template, change it to Edit Html
2.Press Ctrl+F (Command+F for Mac user)
3.Find <style>
4.Paste this code in between <style> and </style> .pic{
width:250px;
height:250px;
}
.picbig{
position: absolute;
width:0px;
-webkit-transition:width 0.3s linear 0s;
transition:width 0.3s linear 0s;
z-index:10;
}
.pic:hover + .picbig{
width:500px;
}
250 = image size haven't zoom in

500 = image size after zoom in

 Dreamer Advice - This image size is square image size, after you past this code
All the image that you want to zoom in will be in a square shape
You can change the number to other image shape

 5.Press Ctrl+F (Command+F for Mac user) again
6.Find any image url you want to zoom in effect by searching img
7.Paste this code and replace image url with your own image url
<img class="pic" src="image url">
<img class="picbig" src="image url">
8.Preview it first, if success, save!!
Dreamer Advice II - You don't have to worry that after you paste this code, all image in your 
                                 blog will be in square shape, the image that you had paste this 
                                 <img class="pic" src="image url"><img class="picbig" src="image url"> 
                                 code will only change in square shape. As my first advice saids, you can 
                                 change the image size

Mission Complete!!