Zoom effect of Images and Pictures with realistic shadow using CSS

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.

This Article Has Been Shared 2534 Times!

Facebook Twitter Google+ Pinterest