Zoom Hover Effect with CSS3 Only

In my opinion design is the thing which really and only matters for a great site. People use to come back where they got attracted to some thing, and design is the thing which can work as a magnet for your visitors. 

In this tutorial I'll describe a cool effect which is based upon CSS3 Transform property. We will use this effect to zoom any HTML element on mouse over. 

Below is the HTML code, so you can better understand the classes used in the CSS3:

<div class="dialog-popup">
    <div class="dialog-container">
        <h1>Hover On The Browser Icons</h1>
        <div class="browser-icon">
         <a href="#" class="chrome-icon"><i>&#160;</i></a>
         <a href="#" class="moz-icon"><i>&#160;</i></a>
         <a href="#" class="opera-icon"><i>&#160;</i></a>
         <a href="#" class="safari-icon"><i>&#160;</i></a>
         <a href="#" class="ie-icon"><i>&#160;</i></a>
     </div>
    </div>
</div>

I hope everyone understand the HTML shown in the above snippet. The <i> tags are used to show the icons in between there. And &#160 is an HTML Entity. It is used to show a space in the output.

CSS for class dialog-popup

.dialog-popup {
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #333;
  font: 12px/20px Lato, "lucida grande", Arial, Tahoma, Verdana, sans-serif;
  z-index: 1;
}

Explanation: The things are rather simpler in the above code. The z-index: 1; specifies the stack order for the particular class.

CSS for class dialog-container

.dialog-container {
  width: 724px;
  padding: 30px 0;
  max-height: 290px;
  min-height: 290px;
  position: relative;
  top: 50%;
  margin: -145px auto 0;
  background-color: #fff;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0px 0px 10px #000;
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
}

Explanation: The above CSS3 will change the div with class dialog-container into a popup. Here in this code, the top property sets the popup's top edge below 50% inside the dialog-popup. The shadow property will create a glowing effect. -webkit- and  -moz- are used with properties for Cross-Browser support.

CSS to create Zooming Effect

.dialog-container .browser-icon {
  margin: 50px 0;
  text-align: center;
}
.dialog-container .browser-icon a {
  padding: 10px;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid #fff;
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.dialog-container .browser-icon a:hover {
  border: 1px solid #D5EAF2;
  border-bottom: 3px solid #A1CBDA;
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
.dialog-container .browser-icon a:active, .dialog-container .browser-icon a:active:hover {
  background: #D5EAF2;
}

Explanation: In the above CSS3 we are styling the a tags, which we have used in the above HTML markup. Actually, these a tags are the real images that we wanted to zoom on hover. In the second set of CSS properties, there are just a simple couple o things related to general styling of a tags. Transition property is used to create a nice looking transitional effect on hover. So, the styling defined below appears with some effect rather than appearing at once, which don't look so nice to me :P.
Now, the third set of above Code, is the very very important part. In this part we have increased the size of the a tags. But not with that width and height technique. Here we are using CSS Transforms.  In .dialog-container .browser-icon a:hover we have used the  border and border-bottom properties. As, you all probably know, the border is used to create a thin line around the a tags on hover (mouse over). And border-bottom is used to change the bottom border separately. The overall border is set to 1px but the bottom border is set to 3px which will be a thinner than the overall border around the a tags.
Transform property is used to change the size of a tags and its contents. Scale(1.1,1.1) will increase the width and height of a tags, when you will hover over them. The last and final set of CSS is used to change the background color of a tags on click (active). This will also add some cool effect you will see.

CSS to Set the Icons into a tags

.dialog-container .browser-icon a i {
  display: inline-block;
  width: 104px;
  height: 104px;
  background: url(browsericons.png);
}
.dialog-container .browser-icon a.chrome-icon i {
  background-position: 0 0;
}
.dialog-container .browser-icon a.moz-icon i {
  background-position: -104px 0;
}
.dialog-container .browser-icon a.opera-icon i {
  background-position: -208px 0;
}
.dialog-container .browser-icon a.safari-icon i {
  background-position: -312px 0;
}
.dialog-container .browser-icon a.ie-icon i {
  background-position: -416px 0;
}

Explanation: The CSS under .dialog-container .browser-icon a i will set the background, width and height and display for <i> </i> tags inside a tags.
Here it is important to note that, we are not using separate images for each icon tag. But it's a single image (See image Here).
In the below sets, we have set the position of the background for all of a tags used in the HTML markup above.
When we use the background property it will set the image as a background image for a tags. Now, in the below parts of CSS, we are specifying that what part of image we want to see in the particular a tag, with the help of background-position property.
In .dialog-container .browser-icon a.chrome-icon i, background position is set to 0 0. It means, it will be showing the image's first 104 pixels (because the width and height of <i> tags is set to 104px).

Under .dialog-container .browser-icon a.moz-icon i, the background position is set to -104 px. Now, in this <i> tag, the second part of image will be visible. Which will consist of Mozilla Icon.

And so on... 

See the live working demo with all of code in the pen below: 

See the Pen Zoom Hover Effect by Asna Farid (@asna_farid) on CodePen.

Note: This post is inspired by Asna Farid's pen on Codepen. This is why, the original pen is shown above. 

• email
• facebook
• linkedin
• twitter
• reddit
• google+

Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +