Zoom image,text,div,anything on hover With CSS!

Published

Here is how you can zoom any html element with css only!
To get a smooth effect, we will add transition effects to all elements in web page.

* {
    /*transition*/
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}



In first example, we give font size as 50px.
Then in its hover state, we add it as 100px.
so when user hover on text, it will get bigger with smooth transition effect.

In second Example, as you can see we use "transform" to tranform the element to something bigger than the original.
In Chrome you will use -webkit-transform: scale(1); in idle state and in hover state, you will assign to -webkit-transform: scale(2);, so it will be zoomed when user hover on it.
In Third Example we use the "width" attribute for element, you can zoom any div, or image with css by doing this way.
So at first, it was like this.
width: 50px;
height: 50px;
When user hover on this, it will change to
width: 100px; 
height: 100px;
In fourth example, we use "zoom" attribute.
In idle state it will be 100%;
So we will Change that to
zoom:150%;
Thus it will be zoomed when user hover on that.


#one 
{ 
font-size: 50px;
top: 0;
left: 0;
}

#one:hover 
{
font-size: 100px 
}



#two {
    /*transform*/
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
 
 top: 0;
 left: 100px;
}

#two:hover {
    /*transform*/
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}



#three {
width: 50px;
height: 50px;
text-align: center;
left: 200px;
top: 0;
}

#three:hover {
width: 100px;
height: 100px;
}




#four{
width: 50px;
height: 50px;
margin-top:-20px; 
margin-left:40px;
}
#four:hover{
zoom:150%;
}


Comments

Post a Comment