Photo morphing effect using CSS and HTML

Today we are about to see some sizzling photo morphing effect hover effects using HTML and CSS. The hover effects was mainly used to gain the attention of the visitors easily especially to your important images and banners.The choice of the images should be made right to make this effect even more attractive.

VIEW DEMO

CODES:

FRAME AROUND YOUR IMAGE:

<style type="text/css">
.pic img{
            border: 10px solid #fff;
            float: left;
            height: 300px;
            width: 300px;
            margin: 20px;
            overflow: hidden;
            -webkit-box-shadow: 5px 5px 5px #111;
            -box-shadow: 5px 5px 5px #111;
               }
</style>
<div class="pic">
<img src="https://.........."></img>
</div>

The below CSS code will add frame around your image and limit your image effects within the frame and does not disturb the other elements in your webpage.

MORPH EFFECT:

This code will morph the image when you hover it.

<style type="text/css">
.pic img{
            border: 10px solid #fff;
            float: left;
            height: 300px;
            width: 300px;
            margin: 20px;
            overflow: hidden;
            -webkit-box-shadow: 5px 5px 5px #111;
            -box-shadow: 5px 5px 5px #111;
               }
</style>
<div class="pic">
<img src="https://.........."></img>
</div>

The class “morph pic” in the <div> tag adds the CSS properties of both morph and pic codes there by you obtain a image with morph effect inside a frame.You can change the morph color of the border by adding “border-color” to the CSS code under the hover division