Image Zoom In/Out On Hover Effect- A Web Design Tips

Hover Effect

There are many ways you can add special effects to your web pages and one of them is adding a Zoom Effect on Images when the user hovers over them.This type of effect is notably used in portfolio-type situations where the design intends to show both visual and informational details. It can be created using jQuery plugins or by using simple CSS3 properties.

 

This piece of code is done using a scale transform CSS property. Using the scale value within the transform property allows you to change the appeared size of an element. The default scale value is 1, therefore any value between .99 and .01 makes an element appear smaller while any value greater than or equal to 1.01 makes an element appear larger. We have used scale property value 1 and 1.5.

 

Here, we have created a simple image zoom in/out effect with CSS that is very useful for quality web design service. We have here two different situations. In the first one, the images are scaled with value 1 initially which gets zoomed-in on hover of the image scaled to 1.5. The second demo is completely opposite of the first demo. It is zoomed-in initially with value 1.5 and gets zoomed-out on hover of the image. This effect could be used in photography websites or image galleries. We have created an image gallery to show the required effect. Below is the code used to implement the concept.

1. Zoom-in effect :

HTML:

<div class="zoom-wrap">
    <div class="zoom-effect">
      <h1>Photo Zoom In Effect</h1>
      <div class="photo-wrap">
        <img src="images/images.jpg" alt="picture1">
      </div>
      <div class="photo-wrap">
        <img src="images/student-image-2.jpg" alt="picture2">
      </div>
      <div class="photo-wrap">
        <img src="images/garden.jpg" alt="picture3">
      </div>
      <div class="photo-wrap">
        <img src="images/download (1).jpg" alt="picture4">
      </div>
      <div class="photo-wrap">
        <img src="images/game9.png" alt="picture5">
      </div>
      <div class="photo-wrap">
        <img src="images/images (1).jpg" alt="picture6">
      </div>
      <div class="photo-wrap">
        <img src="images/game7.png" alt="picture4">
      </div>
      <div class="photo-wrap">
        <img src="images/download (3).jpg" alt="picture5">
      </div>
      <div class="photo-wrap">
        <img src="images/natural.jpg" alt="picture6">
      </div>
    </div>
</div>

 

CSS: 

.zoom-wrap {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.zoom-wrap .zoom-effect {
  display: inline-block;
  width: 100%;
  margin: 20px auto;
}
.zoom-wrap .zoom-effect .photo-wrap {
  float: left;
  height: 200px;
  width: 33.33%;
  overflow: hidden;
}
.zoom-wrap .zoom-effect .photo-wrap img {
  width: 100%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  opacity: .7;
}
.zoom-wrap .zoom-effect .photo-wrap:hover img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 1;
}

 

Snapshot of the zoom-in effect:

                 
            
              Initial view of images                                              Zoom in effect ( On Hover )

2. Zoom-out effect:

HTML: 

<div class="zoom-wrap">
    <div class="zoom-effect reverse">
      <h1>Photo Zoom Out Effect</h1>
      <div class="photo-wrap">
        <img src="images/images.jpg" alt="picture1">
      </div>
      <div class="photo-wrap">
        <img src="images/student-image-2.jpg" alt="picture2">
      </div>
      <div class="photo-wrap">
        <img src="images/garden.jpg" alt="picture3">
      </div>
      <div class="photo-wrap">
        <img src="images/download (1).jpg" alt="picture4">
      </div>
      <div class="photo-wrap">
        <img src="images/game9.png" alt="picture5">
      </div>
      <div class="photo-wrap">
        <img src="images/images (1).jpg" alt="picture6">
      </div>
      <div class="photo-wrap">
        <img src="images/game7.png" alt="picture4">
      </div>
      <div class="photo-wrap">
        <img src="images/download (3).jpg" alt="picture5">
      </div>
      <div class="photo-wrap">
        <img src="images/natural.jpg" alt="picture6">
      </div>
    </div>
  </div>

 

CSS: 

.zoom-wrap {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.zoom-wrap .zoom-effect {
  display: inline-block;
  width: 100%;
  margin: 20px auto;
}
.zoom-wrap .reverse .photo-wrap img {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.5);
  transform: scale(1.5);
}
.zoom-wrap .reverse .photo-wrap:hover img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

 

Snapshot of the zoom-out effect:

                    
            
           Initial view of images                                                 Zoom out effect view( On Hover )

Browser support: Most of the CSS3  properties are supported in all kinds of browsers. Below shows the list of browsers which support the above piece of codes.

IE Edge Firefox Chrome Safari Opera