Go Back   Site Owners Forums - Webmaster Forums > Web Design > Graphic Design

Notices


Reply
 
Thread Tools Rate Thread Display Modes
Old 02-02-2014, 09:52 PM   #1
arronmattwills
Registered User
 
Join Date: Dec 2013
Posts: 493
Thumbs up How increase the size of the element on mouse hover without using juery with CSS3?

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.
arronmattwills is offline   Reply With Quote

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
how to increase google page rank kitchin Google 195 06-22-2020 12:52 AM
increase your Site Traffic stsam000 Post your ad here 38 03-25-2020 11:45 PM
What should I do to increase Google backlinks? jennypretty General Discussion 15 07-21-2014 01:50 PM
How to increase Facebook likes? Rob Alice Search Engine Optimization 3 07-04-2013 02:32 AM
How to increase leads of website zamina Web Promotion 26 10-02-2012 07:32 AM


All times are GMT -7. The time now is 07:46 AM.


Powered by vBulletin Copyright © 2020 vBulletin Solutions, Inc.