Using CSS3 advanced property scale, we can simple scale, increase or decrease the size of the element in normal and hover effects in x and y axis also. The syntax will be like this:
Quote:
.teaserPanelBox:hover {
width: 250px;
background: blue;
border: 1px solid #eaeaea;
-webkit-transform: scale(260px);
-moz-transform: scale(260px);
-o-transform: scale(260px);
transform: scale(260px);
}
|
I have directly given hover effect to my class only.
Other features of transform: rotate, skew and translate. We can use this scale property of CSS3 in all advanced browsers, it will supports all android mobiles version browsers also.