There are lot of WordPress plugins to create image Zoom effect. Most of them uses jQuerry and thus increases the page loading time. Zoom effect of Images and Pictures can be created by only using a CSS trick without and jQuerry and thus less page loading time. Also, the Free WordPress Blogs can not Install Plugins (those who have not upgraded), so this trick of CSS Zoom effect of Images will be helpful for Free WordPress blog users as well.
Prerequisites for creating Zoom effect of Images and Pictures
To create image zoom effect using CSS, you will need:
- Two sizes (big and small) of the same photo / image for Zoom effect
- Any Text Editor. We recommend using gedit for easy usage.
Here are our two sizes of photos for creating the zoom effect: Thumbnail for creating Zoom effect: This is the bigger photo:
---
The required HTML code for creating the zoom effect:
Firstly, go to Media > library in your WordPress blog and copy the full url after uploading the images. The code for the above example is (scroll down first, then hover over the image):
<ul>
<li>
<a href=”https://thecustomizewindows.com/“>
<img src=”https://thecustomizewindows.com/wp-content/uploads/2011/06/Zoom-effect-of-Images-and-Pictures-only-using-CSS-thumbnail.jpg” alt=”Zoom effect of Images and Pictures only using CSS-thumbnail“> <img src=”https://thecustomizewindows.com/wp-content/uploads/2011/06/Zoom-effect-of-Images-and-Pictures-only-using-CSS.jpg” alt=”Zoom effect of Images and Pictures only using CSS“>
</a>
</li>
</ul>
Change the target URL (href), both img src URL and the alt tags as per your need.
CSS code for creating the zoom effect along with box shadow effect:
To get the HTML code for the zoom effect working, we need to add this bits of CSS code to the Theme’s style.css file. It will create the zoom effect along with shadow of the image:
.photo
{
margin: 0;
padding: 0;
}.photo img
{
border: none;
}.photo li
{
list-style: none;
position: relative;
}
a .zoom
{
display: none;
}
a:hover .zoom
{
display: block;
position: absolute;
top: 0;
left: 0;
box-shadow:rgba(0,0,0,.5) 0 3px 6px;
-webkit-box-shadow:rgba(0,0,0,.5) 0 3px 6px;
-moz-box-shadow:rgba(0,0,0,.5) 0 3px 6px;
}
Working example of this tutorial on creating Zoom effect of Images with realistic shadow using only CSS :
We have given a bit deep shadow along with zoom effect.

nice info brother.
but how to create zoom effect of new windows?
Thanks bro.
New window? I am sorry I can not understand what you mean. Can you explain a bit ?
example : such as http://randomous.com/floatbox/demo click on picture then you see the effects.
thanks
Oh! That one? That is called ” light box “. That is not possible with only CSS. Ajax or javascript is need. There are many nice free WordPress plugins are available. You can try them.
a’m don’t like plugin. how to create zoom effect on picture without plugin? please help me
OK :)
You will need a Javascript or Ajax. Kindly wait for 1-2 days, I will post the method in the way you want.
I have found free Open Source Javascript based Zoom Pop Up effect here : http://gettopup.com/ ; hope it will help you.
thanks you very very very much brother.
good lucky in your job.
You are welcome Ibnu bro. Thank you very much for the kind words.
Excellent CSS Sprite Tutorial.
Thank you for your consent.