Morphing is a special and simple effect in pictures to change the one shape to another shape. Here i will tell you how to create simple morphing effect using the css3 code. This below example i will show you how to create the rectangle type image to circle type image with the help of Css like below diagram. use the transition: all 0.5s ease; css properties to change the image shape smooth manner. Just change the border-radius:50%; to change the image shape. This is very easy to create i hope this example is very useful. This example have the source code and demo page, Please check out the demo page for this morphing effect.
Code to create morph effect:
<html>
<head>
<title>Image Morph Effect on hover the image</title>
<style>
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border-radius: 50%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pic {
border: 6px solid #000;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="morph pic">
<img src="marph-effect-css3.jpg" alt="marph-effect">
</div>
</body>
</html>
<head>
<title>Image Morph Effect on hover the image</title>
<style>
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border-radius: 50%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pic {
border: 6px solid #000;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="morph pic">
<img src="marph-effect-css3.jpg" alt="marph-effect">
</div>
</body>
</html>
0 Comments