Skip to main content

On Hover Effect A Web Design Tips

Saurabh Dhariwal

Saurabh Dhariwal

2 min 30 sec
Hover Effect
Vue JS /

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 https://www.addwebsolution.com/web-design-services 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 services. 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

 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

For Web Design Services Contact us now!