Zoom Image On Hover Using CSS Without Jquery

Hi Friends, Today I will tell you about zoom image on hover using css without jquery. For all the eCommerce and other some sites have a functionality of image zooming using heavy jquery plugin which is slow down your website. To overcome this problem we have to use CSS code for creating a zooming facility to our product or any other image.

As we know lots of zooming plugins are available on the internet but all the plugins are using heavy jquery and javascript language to create a zoom feature in the image. Let create a zoom feature for the image with the help of div and css3 animation with us.

Zoom Image On Hover Using CSS Without Jquery Live Demo:

See the Live Demo and download the code below:

How To Zoom Image On Hover Using CSS Without Jquery:

You have to use some simple code to create a zoom effect on your website image. Follow some steps to create it. These steps are

Step1: Open Your Web Page Code in any Code Editor.

Step2: Paste Below Code in your webpage.

CSS Code:

.product {
  border: 1px solid #333;
  overflow: hidden;
  width: 90%;
  height: 50%;
}
.product img {
  max-width: 100%;
 
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.product:hover img {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

In the product class, i am styling with border, overflow and some responsive width and height where your image is placed or zoom within that area.

After That i have some styling of the image inside the product class using product img.  In this i have used maz-width and transition styling property of CSS3.

When you hover the image it is zooming inside the div element. You can increase the zooming using scale(Your Value);

HTML Code:

<div class="product">
				<a href="www.mydomain.com" target="_blank"><img src="ImageSource,jpg"></a>
			</div>

In this code we are creating div with a class product and inside a div your image is placed with a inner zoom functionality.

Step3: Paste the code and enjoy the inner zoom in any image.

Now You Know How to Zoom Image On Hover Using Mobile

For any problem you see the live demo and download the code from below.

Read About Other Interesting Things below.

1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
4. Basics of Social Media Optimization Services
5. On Page Search Optimization Services
6. How to Create a Website from scratch for beginners
7. How To Write a Blog for Website and Content Marketing
8. Website Promotion – Need For All Websites
9. Important Things to Think Before Graphic Designs
10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Categories: Website Design