Hello There, Guest! RegisterLogin with Facebook
Login with Facebook

New Anna University Nov / Dec 2016 Examination Important Questions
New Anna University (UG / PG) Nov/Dec 2016 and Jan 2017 Theory , Practical Exam Timetable
>>> Anna University Sixth Semester Question Bank Collection (R2013) ECE,MECH,CSE,IT,EEE,CIVIL,EIE
>>> Anna University November/December 2015 Examination Question Papers
>>> Anna University Study Materials for all Departments
>>> Anna University Question Papers : April May June 2015 Question Papers | Nov Dec 2014 and Jan 2015 Question Papers

Register or Login to Submit Study Materials , Shoutbox and also to access Many Features !!

Vidyarthiplus Shop :: Handwritten Premium Lecture Notes
Share your Study Materials with us
Share your Study Materials with us : Click Here

CSS: Transform hover effect
#1


hi folks , today i am going to show you a effect of css which is called Transform
and is used to zoom the the content



ok , lets start learning it




firs we are going to make some content then we are going target that with the css


html we are working on :

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css"/><title>css zoom and rotate</title></head>
<
body><div class="pic"><center><img src="pic.png"/></center></body></html

Style.css is the name of css file



now lets target it with CSS


now it works for all browsers mostly


only the thing is that we are going to work with different codes

now we are going to write codes for opera, firefox,IE,chrome,safari



using this code we going to do the same


PHP Code:
\* for chrome and safari *\
.
pic:hover{
-
webkit-transform:scale(1.0)


PHP Code:
\* for firefox *\
.
pic:hover{
-
moz-transform:scale(1.0)


PHP Code:
\* for opera *\
.
pic:hover{
-
o-transform:scale(1.0)


PHP Code:
\* for IE *\
.
pic:hover{
-
ms-transform:scale(1.0)



here 1.0 means on click the content is going to zoom by 1%


hope it helped you all Wink

[Image: An9XX.gif]


Reply
#2

Gr8 job...bro..

#Praise the creator not the creations#
-Mr.lonely


Reply
#3


thanks for the complement

[Image: An9XX.gif]


Reply

Subscribe


Recommend on Google