0
Tutorial teaches us how to create a zoom in and zoom out effects using pure CSS3. A simple comic style zoom effects on mouse hover. 

CSS3 Zoom in outMy website already has some zoom effects using CSS3. We had seen how to spin images and how to zoom and spin images in the past. This article is an continuation of the those articles. Today, it is time to modify and enhance the CSS3 transitions and scaling properties to the next level by creating a nice zoom in and zoom out effect on mouse hover.

Objective:

Create a simple comic style zoom in and zoom out effect on a div element.

Browser Support:[Try with the latest versions]

1. Firefox
2. Chrome
3. Safari
4. Opera
NOTE: IE is not supported

Technologies used:

1. CSS3[CSS3 transitions, scaling, border radius, opacity, rotation]
2. HTML

Demo Below:[Hover the mouse right at the middle of the element]



COMICS
Style





Codes doing the magic:


CSS3:
.zoom_div
{
text-align:center;
width:65px;
height:40px;
background:#ebbb2f;
color:#ffffff;
position:absolute;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 3s,opacity 3s,background 3s,width 3s,height 3s,font-size 3s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:3s,3s,3s,3s,3s,3s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:3s,3s,3s,3s,3s,3s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:3s,3s,3s,3s,3s,3s;
border-radius:5px;
opacity:0.6;
}
.zoom_div:hover
{
-moz-transform: rotate(-540deg) scale(-2);
-webkit-transform: rotate(-540deg) scale(-2);
-o-transform: rotate(-540deg) scale(-2);
transform: rotate(-540deg) scale(-2);
background:#ad2a56;
width:90px;
height:60px;
text-align:center;
font-size:20px;
border-radius:10px;
opacity:6;
}



HTML Markup:
<div class="zoom_div">
COMICS<br />
<span style="text-align:center; font-size: 14px;">Style</span>
</div>


Explanation:

We create a simple Div element where you insert the words "Comics Style".
The div element is filled with some color at the beginning. The border is curved using border-radius property.
The main part is setting the initial transitions. The transitions affected or "opacity", "background", "height and width",  "font". We also set the duration for the transition as 3sec.

When the mouse is hovered above the constructed div element, all the transitions are triggered. Now, we set the "rotate" and "scale" properties. We make the div element rotate at an angle of -540 degrees plus a negative Scale index which makes the div element zoom to small and when the mouse is lifted off, it comes back to the same position.

Note: This effect can be applied for images as well using the same code.

Hope you liked this tutorial. Catch you again with more such interesting ones. Stay tuned.

Post a Comment

 
Top