CSS3 Zoom Image Animation Effect on hover

Filed Under: HTML

Today we will look into CSS3 Zoom Image animation effect with mouse on hover. With images being the soul of a website, you might have definitely tried your hands on adding some cool hover effects to them.

CSS3 Zoom Image

css zoom image, css zoom animation, css zoom image on hover animation effect
In this tutorial, I have penned down some useful examples of creating a flawless CSS3 zoom image effect using the CSS transform and transition properties.

What makes CSS3 the best choice for achieving zoom effects for images?

Although you may find a large number of jQuery plugins for creating an image zoom effect, CSS3 is perhaps the most recommended one. The reason being its seamless cross-browser compatibility which saves you from the headache associated with addition of lengthy jQuery codes.

The three examples that I’ll be looking at in this CSS zoom image tutorial include:

  1. As per first example, I’ll be achieving the zoom effect using transform: scale(2) and transition: all .3s ease-out
  2. As per second example, I’ll be achieving the zoom effect using two images where the second image would be shown on hover on just the right side of the parent image.
  3. As per the third example, I’ll be achieving the zoom effect using two images where the second image would be shown on mouse hover at a pre-defined location which is related to the current position of the parent image using CSS transform: translate(0, 300px);

Let’s start with the first example of css image zoom on hover animation

In this example, I’ve used 2 images to showcase the zoom effect. Here is a detailed explanation of the transition and transform properties of CSS which will be used here:

  • transition: all .3s ease-out – This transition property will include the following values:

    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

As per above, transition-property will have all(comma-separated) or none of the CSS properties, transition-duration will include values which will determine the amount of time that will be consumed in completion of the transition. This will be displayed in seconds and milliseconds.

In addition to this, the transition-timing-function will be used for specifying the change in speed at which the transition gets modified over the duration(here, I’m referring to the value set for transition-duration). The transition-timing-function property can include the below values:

  1. Linear: It represents that a uniform speed will be maintained for the image transition
  2. Ease-in: It represents that the animation will be started slowly and finished at a high speed
  3. Ease-out: It represents that the animation will be started at full speed and finished at a slow speed
  4. Ease-in-out: It represents that the animation will be started slowly, run at the fastest speed at the middle point and finished off slowly
  5. Ease is like ease-in-out– It represents that the animation will operate in the same manner as in the case of ease-in-out with only one exception that during the start, it will be slightly faster as compared to its speed in the end.

Finally, there will be transition-delay which will represent the time delay from when the transition has been triggered.

  • Transform: scale(2): This is a CSS Transform property that will be used for increasing or decreasing the size of a specific image element, Here, scale(2) means that you’ll be able to scale an image element just double than its original size. Here, I’ll be using two values viz: x and y which will be used for stretching the image element horizontally and vertically respectively.

The code associated with this example is shown below:

css3-hover-zoom1.html


<!DOCTYPE HTML>
<html> 
<head>
<style type="text/css">
div{ 
	padding:25%;
	float: left; 
} 
.parentimage { 
	width: 300px;
	height: 300px; 
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
} 
.parentimage:hover {
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
} 
</style>
</head>
<body>
<div>
	<img class="parentimage" src="Images/image1.jpg" />
	<img class="parentimage" src="Images/image2.jpg" />
	<img class="parentimage" src="Images/image3.jpg" />
	<img class="parentimage" src="Images/image4.jpg" />
</div> 
</body> 
</html>

Now, let’s get to know what happens in the second example

Here, I’ll be using each of the four images twice. The transition properties used here will include the ones mentioned below:

  • position:absolute – This property will be applied to the second version of a parent image so that when the same(here, I’m referring to the image’s second version) is displayed in the web browser, it won’t affect other page elements.
  • Width: 0px – this property will be used for hiding the second version of the main/parent image
  • transition: width 0.3s linear 0s – this property will be used for maintaining consistent speed throughout the transition. For a better understanding of this property, I recommend reviewing the first example.

The code associated with this example is shown below:

css3-hover-zoom2.html


<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
    div{  
        padding:20%;  
        float: left;  
    }  

    .parentimage{  
        width: 300px;  
        height: 300px;  
    }  
    .parentimageLarge{  
        position:absolute;  
        width: 0px;  
        transition: width 0.3s linear 0s;  
        z-index: 12;  
    }  
    .parentimage:hover + .parentimageLarge{  
        width:600px;  
        height:600px;                 
    }         

</style>        
</head>  

<body>  
<div>  

  <img class="parentimage" src="Images/image1.jpg" />            
  <img class="parentimageLarge" src="Images/image1.jpg" />  

  <img class="parentimage" src="Images/image2.jpg" />  
  <img class="parentimageLarge" src="Images/image2.jpg" />  

  <img class="parentimage" src="Images/image3.jpg" />  
  <img class="parentimageLarge" src="Images/image3.jpg" />  

  <img class="parentimage" src="Images/image4.jpg" />  
  <img class="parentimageLarge" src="Images/image4.jpg" />  
    
</div>          
</body>     
</html>  

Finally, let’s get to know about the third example of css zoom image animation

This example is absolutely similar to example no.2 with only a single difference that the resultant image is located at a different position. The transform property used here is:

transform: translate(0,300px) : this property is used for shifting the image element from its current location to a new one.

CSS3 Code associated with this example is shown below:


.parentimage:hover + .parentimageLarge{ 
width:600px; 
height:600px; 
transform: translate(0,300px); 
}

CSS3 Zoom Image Animation Effect Demo

You can visit below URLs for the demo of all three examples.

  1. CSS Zoom Image Animation Effect Demo Example 1
  2. CSS Zoom Image Animation Effect Demo Example 2
  3. CSS Zoom Image Animation Effect Demo Example 3

CSS Zoom Image Summary

Hope you’d have followed the steps covered in this tutorial and would find them useful enough in achieving the desired zoom effect for your website images.

About the Author: Jason Roiz is qualified outsource web development professional who brings to the table a quantum of learning around custom Magento development services. He meets expectations for OSSMedia, a CMS development company giving proficient WordPress, Magento, Drupal and Joomla improvement administrations.

Comments

  1. Komal says:

    Good one
    Find some unique code for image hover.
    Thanks for this article.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages