Options
CSS: Transform hover effect
- CSS: Transform hover effect
-
CSS: Transform hover effect
ssparikshya > 11-12-2012, 01:24 PM
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
-
RE: CSS: Transform hover effect
Mr.lonely > 11-12-2012, 01:28 PM
Gr8 job...bro.. -
RE: CSS: Transform hover effect
ssparikshya > 11-12-2012, 02:21 PM
thanks for the complement