CSS: Transform hover effect

2
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]
Gr8 job...bro..
#Praise the creator not the creations#
-Mr.lonely
thanks for the complement
[Image: An9XX.gif]

    CSS: Transform hover effect
İlginizi çekebilir:
  • CSS: Opacity hover effect