Sunday, May 27, 2012
Unknown
In this I have a lamp effect. and if you are using more than one image , so as you move down the list of images, each image or content slowly expands and then goes back to it's original size. Here I have used a center tag for aligment and hover effect in CSS. Negative/positive margin value change will expand your image from different part of the image.
#Code#
Demo :
#Code#
<html>
<head>
<title> css stack and grow</title>
<style text="text/css">
#container {
width: 300px;
margin: 0 auto;
}
.ex2{
height: 300px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.ex2:hover {
height: 333px;
width: 400px;
margin-left: -50px;
}
</style>
</head>
<body>
<div id="container">
<img src="a.jpg" class="ex2">
</div>
</body>
</html>
<head>
<title> css stack and grow</title>
<style text="text/css">
#container {
width: 300px;
margin: 0 auto;
}
.ex2{
height: 300px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.ex2:hover {
height: 333px;
width: 400px;
margin-left: -50px;
}
</style>
</head>
<body>
<div id="container">
<img src="a.jpg" class="ex2">
</div>
</body>
</html>
Demo :
Hover on image
*Hit a comment if you like this.
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.