Image Zoom Effect Using css3 is largely used on the Internet, particularly in websites that intend to showcase images with more clarity and size than their current form.
The following tutorial will focus on some examples that we will provide you with in order for you to gain a better understanding of how you can apply the different zoom effects. In our examples, we are primarily concentrating on CSS3 and its properties like transform and transition.
The examples essentially focus on three aspects:
1. Implementing Zoom by using scale(2) of transform property and all .3s ease-out of the transition.
2. Implementing Zoom via two images wherein when you hover the mouse over the first image, its enlarged version is displayed on the same window, on the right hand side of the original image.
3. Implementing Zoom via two images wherein when you hover the mouse over the first image, its enlarged version is displayed on the same window, but on a custom location depending on the coordinates we are setting.
Now, let us elaborate on these examples one by one:
First Example:
In this example, we have 8 images representing different color patterns on which we will execute the zoom effect. To begin with, we will throw some light on the code that will bring into effect the required zoom effect:
Image Zoom By the transition Property :
all .3s ease-out: transition property contains different values, which are the following:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
- Transition-property: This part can have every single value, or for that matter, have none. If there is a list of properties here, they will be separated by comma.
- Transition-duration: It represents the total time taken by the transition to complete. This duration of the transition is represented in seconds and milliseconds.
- Transition-timing-function: One of the significant properties of the transitions is the speed at which the transitions change and this property determines precisely that. It specifies the speed of durations over the duration its running. There are different values you can assign to it:
– With linear, the speed will not change during the entire duration of the transition.
– With ease-in, the animation will begin at a calm rate, and gradually pick the speed. – With ease-out, the animation will begin at full-throttle and then gradually reduce in speed. - Transition-delay makes sure that the transition is delayed by a specific amount of time.
Image Zoom By the transform:scale(2)
scale(2): When you are trying to alter the size of the element, you can use the scale method. Now, if you do not mention any unit, it will work as a multiplier. So, we have used scale(2) so that we can double the size of our element. You can also give the coordinates so that the size is extended both vertically and horizontally.
Here is our code for the zoom:
<!--
Site : http:www.smarttutorials.net
@author muni
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Create Image Zoom Effect Using CSS3, image zoom using css3, image zoom css3 hover, image zoom css3 mouseover, How to Create a Zoom Effect on Image Hover with CSS">
<meta name="keywords" content="Create Image Zoom Effect Using CSS3, image zoom using css3, image zoom css3 hover, image zoom css3 mouseover, How to Create a Zoom Effect on Image Hover with CSS">
<meta name="author" content="muni">
<link rel="icon" href="../../favicon.ico">
<title>Image Zoom Effect Using CSS3</title>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700">
<!-- Bootstrap core CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
img{
margin-bottom: 10px;
}
.rangoliPic {
width: 200px;
height:200px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rangoliPic:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Image Zoom Effect</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> <a href="http://www.smarttutorials.net/"><i class="fa fa-home"></i>Home</a> </li>
<li><a href="http://www.smarttutorials.net/demo/"> <i class="fa fa-book"></i> Demo </a></li>
<li><a href="http://blog.smarttutorials.net/"> <i class="fa fa-bank"></i> Blog </a></li>
<li><a href="http://forum.smarttutorials.net/"> <i class="fa fa-file"></i> Forum </a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container content">
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<h1 class="text-center title">Image Zoom Effect Using CSS3</h1>
</div>
</div>
<div class='row btn-row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center'>
<a href="index.html" class='btn btn-success zoom-btn'>Demo1</a>
<a href="zoom-effect-image.html" class='btn btn-primary zoom-btn'>Demo2</a>
<a href="css3-image-zoom-hover.html" class='btn btn-info zoom-btn'>Demo3</a>
</div>
</div>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<img class="rangoliPic" src="http://2.bp.blogspot.com/-qZuDEA2EzPY/VNsetVBvwsI/AAAAAAAAD7k/gOwWPj1FWkg/s1600/1.jpg" />
<img class="rangoliPic" src="http://4.bp.blogspot.com/-jQcqvCZM14U/VNsetNlz4eI/AAAAAAAAD7c/0YQKkjdMHTM/s1600/2.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-o88UFlLlpiE/VNsetWeYo9I/AAAAAAAAD7g/mKMvqOmWhEc/s1600/3.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-7gZq2lqB0Dw/VNseuBrwBCI/AAAAAAAAD78/Dnl5MExBVUE/s1600/4.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-LiMJMoIat-s/VNseuTDYS3I/AAAAAAAAD70/c1vRMbnR-bU/s1600/5.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-0dA0-phFsCo/VNseuq1QgnI/AAAAAAAAD74/wpNm0Eu0dFI/s1600/6.jpg" />
<img class="rangoliPic" src="http://2.bp.blogspot.com/-ztzwLQ2cJYE/VNsevUorAMI/AAAAAAAAD8E/70zrGIgKn6o/s1600/7.jpg" />
<img class="rangoliPic" src="http://4.bp.blogspot.com/-PkpEWRiVZWU/VNsevgb4N6I/AAAAAAAAD8M/agPWXaVOHow/s1600/8.jpg" />
<img class="rangoliPic" src="http://1.bp.blogspot.com/-Rma4pgigu68/VNsev8u87BI/AAAAAAAAD8U/Jdi0zF0PE0g/s1600/9.jpg" />
</div>
</div>
</div>
<h2> </h2>
<footer class="footer">
<div class="container">
<p class="text-muted text-center" style="color:#fff">Copyright By <a href="http://smarttutorials.net/" target="_blank" style="color:#bdc3c7">SmartTutorials.net</a>.</p>
</div>
</footer>
</html>
Image Zoom on Mouse Hover Using Two Images:
In our second example, we will use the same images as used previously. However, the images are used twice here as we are reproducing the same image in its zoomed version on its right side.
- Will will apply position:absolute to the other image in order to ensure that there is no interference between this image and the other page elements when this image gets displayed after a hover on the first image.
- We will set the width to 0px so that the second image is hidden when there is no hover.
Here is the code for our example:
<!--
Site : http:www.smarttutorials.net
@author muni
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Create Image Zoom Effect Using CSS3, image zoom using css3, image zoom css3 hover, image zoom css3 mouseover, How to Create a Zoom Effect on Image Hover with CSS">
<meta name="keywords" content="Create Image Zoom Effect Using CSS3, image zoom using css3, image zoom css3 hover, image zoom css3 mouseover, How to Create a Zoom Effect on Image Hover with CSS">
<meta name="author" content="muni">
<link rel="icon" href="../../favicon.ico">
<title>Image Zoom Effect Using CSS3</title>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700">
<!-- Bootstrap core CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
img{
margin-bottom: 10px;
}
.rangoliPic{
width: 200px;
height:200px;
}
.rangoliPicBig{
position:absolute;
width: 0px;
transition: width 0.3s linear 0s;
z-index: 10;
}
.rangoliPic:hover + .rangoliPicBig{
width:400px;
height:400px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Image Zoom Effect</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> <a href="http://www.smarttutorials.net/"><i class="fa fa-home"></i>Home</a> </li>
<li><a href="http://www.smarttutorials.net/demo/"> <i class="fa fa-book"></i> Demo </a></li>
<li><a href="http://blog.smarttutorials.net/"> <i class="fa fa-bank"></i> Blog </a></li>
<li><a href="http://forum.smarttutorials.net/"> <i class="fa fa-file"></i> Forum </a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container content">
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<h1 class="text-center title">Image Zoom Effect Using CSS3</h1>
</div>
</div>
<div class='row btn-row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center'>
<a href="index.html" class='btn btn-success zoom-btn'>Demo1</a>
<a href="zoom-effect-image.html" class='btn btn-primary zoom-btn'>Demo2</a>
<a href="css3-image-zoom-hover.html" class='btn btn-info zoom-btn'>Demo3</a>
</div>
</div>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<img class="rangoliPic" src="http://2.bp.blogspot.com/-qZuDEA2EzPY/VNsetVBvwsI/AAAAAAAAD7k/gOwWPj1FWkg/s1600/1.jpg" />
<img class="rangoliPicBig" src="http://2.bp.blogspot.com/-qZuDEA2EzPY/VNsetVBvwsI/AAAAAAAAD7k/gOwWPj1FWkg/s1600/1.jpg" />
<img class="rangoliPic" src="http://4.bp.blogspot.com/-jQcqvCZM14U/VNsetNlz4eI/AAAAAAAAD7c/0YQKkjdMHTM/s1600/2.jpg" />
<img class="rangoliPicBig" src="http://4.bp.blogspot.com/-jQcqvCZM14U/VNsetNlz4eI/AAAAAAAAD7c/0YQKkjdMHTM/s1600/2.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-o88UFlLlpiE/VNsetWeYo9I/AAAAAAAAD7g/mKMvqOmWhEc/s1600/3.jpg" />
<img class="rangoliPicBig" src="http://3.bp.blogspot.com/-o88UFlLlpiE/VNsetWeYo9I/AAAAAAAAD7g/mKMvqOmWhEc/s1600/3.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-7gZq2lqB0Dw/VNseuBrwBCI/AAAAAAAAD78/Dnl5MExBVUE/s1600/4.jpg" />
<img class="rangoliPicBig" src="http://3.bp.blogspot.com/-7gZq2lqB0Dw/VNseuBrwBCI/AAAAAAAAD78/Dnl5MExBVUE/s1600/4.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-LiMJMoIat-s/VNseuTDYS3I/AAAAAAAAD70/c1vRMbnR-bU/s1600/5.jpg" />
<img class="rangoliPicBig" src="http://3.bp.blogspot.com/-LiMJMoIat-s/VNseuTDYS3I/AAAAAAAAD70/c1vRMbnR-bU/s1600/5.jpg" />
<img class="rangoliPic" src="http://3.bp.blogspot.com/-0dA0-phFsCo/VNseuq1QgnI/AAAAAAAAD74/wpNm0Eu0dFI/s1600/6.jpg" />
<img class="rangoliPicBig" src="http://3.bp.blogspot.com/-0dA0-phFsCo/VNseuq1QgnI/AAAAAAAAD74/wpNm0Eu0dFI/s1600/6.jpg" />
<img class="rangoliPic" src="http://2.bp.blogspot.com/-ztzwLQ2cJYE/VNsevUorAMI/AAAAAAAAD8E/70zrGIgKn6o/s1600/7.jpg" />
<img class="rangoliPicBig" src="http://2.bp.blogspot.com/-ztzwLQ2cJYE/VNsevUorAMI/AAAAAAAAD8E/70zrGIgKn6o/s1600/7.jpg" />
<img class="rangoliPic" src="http://4.bp.blogspot.com/-PkpEWRiVZWU/VNsevgb4N6I/AAAAAAAAD8M/agPWXaVOHow/s1600/8.jpg" />
<img class="rangoliPicBig" src="http://4.bp.blogspot.com/-PkpEWRiVZWU/VNsevgb4N6I/AAAAAAAAD8M/agPWXaVOHow/s1600/8.jpg" />
<img class="rangoliPic" src="http://1.bp.blogspot.com/-Rma4pgigu68/VNsev8u87BI/AAAAAAAAD8U/Jdi0zF0PE0g/s1600/9.jpg" />
<img class="rangoliPicBig" src="http://1.bp.blogspot.com/-Rma4pgigu68/VNsev8u87BI/AAAAAAAAD8U/Jdi0zF0PE0g/s1600/9.jpg" />
</div>
</div>
</div>
<h2> </h2>
<footer class="footer">
<div class="container">
<p class="text-muted text-center" style="color:#fff">Copyright By <a href="http://smarttutorials.net/" target="_blank" style="color:#bdc3c7">SmartTutorials.net</a>.</p>
</div>
</footer>
</html>
Image Zoom on Mouse Hover On Custom Location:
This example pretty much does the same thing as the second one does, except for that the zoomed image is being displayed at a different position.
transform: translate(0,300px); : translate will do the job of moving the element from its current location.
Here is the code for the same:
.rangoliPic:hover + .rangoliPicBig{
width:400px;
height:400px;
transform: translate(0,200px);
}
And thus, we have successfully applied three different zoom properties. Do let us know if you have found this tutorial useful and your insights are always welcome.
Author Bio:
Maria Mincey is an software developer for Xicom Technologies, a offshore software development company which delivers most comprehensive web applications and solutions for different industry verticals..