Hello friends...
How are you ? I think you are all fine.At present time i am learning to design the webpages using CSS3. CSS3 gives a great design & effect to our webpages.
In this post i'll show you how to use hover effect in webpages.
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="post.css"
<title>image</title>
</head>
<body>
<div class="grow img">
<img src="1.jpg"/>
</div>
<div class="shrink img">
<img src="1.jpg"/>
</div>
</body>
</html>
CSS
.grow img {
height: 100px;
width: 100px;
-webkit-transition: all 1s ease;
}
.grow img:hover {
width: 600px;
height: 600px;
}
.shrink img {
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
.shrink img:hover {
width: 100px;
height: 100px;
}
How are you ? I think you are all fine.At present time i am learning to design the webpages using CSS3. CSS3 gives a great design & effect to our webpages.
In this post i'll show you how to use hover effect in webpages.
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="post.css"
<title>image</title>
</head>
<body>
<div class="grow img">
<img src="1.jpg"/>
</div>
<div class="shrink img">
<img src="1.jpg"/>
</div>
</body>
</html>
CSS
.grow img {
height: 100px;
width: 100px;
-webkit-transition: all 1s ease;
}
.grow img:hover {
width: 600px;
height: 600px;
}
.shrink img {
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
.shrink img:hover {
width: 100px;
height: 100px;
}
Thanks....
just mouse hover on any image
just mouse hover on any image
