Sunday, May 27, 2012
Unknown
This works best when used with a series of horizontal items/images. Hovering on that images will create a wave type effect.Here margin starts at 15px and reduces 2px on hover which makes your image to jump up.This can also be applied to texts on image.
#CODE#
Demo :
<html>
<head>
<title> css bump up </title>
<style text="text/css">
.ex1{
width: 200px;
height: 233px;
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.ex1:hover {
margin-top: 2px;
}
</style>
</head>
<body>
<img src="a.jpg" class="ex1">
</body>
</html>
<head>
<title> css bump up </title>
<style text="text/css">
.ex1{
width: 200px;
height: 233px;
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.ex1:hover {
margin-top: 2px;
}
</style>
</head>
<body>
<img src="a.jpg" class="ex1">
</body>
</html>
Demo :
#Due to some internal problem this demo is not working properly. So please implement code given below in your PC. you will have a nice CSS effect#
*Hit a comment if you like this or any doubt.
*Hit a comment if you like this or any doubt.
Posted in: CSS Tutorial
0 comments:
Post a Comment
This provides free backlink for you so feel free to comment and get a free backlink.