Image Zoom In/Out On Hover Effect A Web Design Tips Skip to main content

On Hover Effect A Web Design Tips

Saurabh Dhariwal

Saurabh Dhariwal

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.

 

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 values 1 and 1.5.

 

Here, we have created a simple image zoom-in/out effect with CSS that is very useful for the best Website Design company. 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 the opposite of the first demo. It is zoomed in initially with the value of 1.5 and gets zoomed out on the 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

 Initial view of images

Zoom in effect ( On Hover )

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 

 Initial view of images

Zoom out effect view( On Hover )

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