css zoom-in/zoom-out on mouse hover effect

Copy and Paste the 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" />
<title>css zoom-in/zoom-out on mouse hover effect</title>
<style>

.rough{
width:90%;
background:#333333;
padding:10px;
margin:auto;
}
.ro{
width:300px;
background:#999999;
border:10px solid #003333;
box-border:resize;
margin:auto;
}
.rought-image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
   -moz-transition: all 1s ease; /* Firefox */
   -o-transition: all 1s ease; /* IE 9 */
   -ms-transition: all 1s ease; /* Opera */
   transition: all 1s ease;
        max-width: 100%;
}
.rought-image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(0.25);
}

.rought-image {
  width:100%;
  height:100%;
  margin:auto;
}
</style>
</head>

CSS and CSS3 TutorialS

Search This Blog

css zoom-in/zoom-out on mouse hover effect

Copy and Paste the code

Comments

Post a Comment