How we can Make a Effective Photo Frame and Its Effects

This Code For Design HTML

Code For background and Image Border

* {
-webkit - box - sizing: border - box; - moz - box - sizing: border - box; - ms - box - sizing: border - box;
box - sizing: border - box;
}
body {
background: #333;
}
.pic {
border: 10px solid # fff;
float: left;
height: 300px;
width: 300px;
margin: 50px;
overflow: hidden;
- webkit - box - shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px # 111;
}

Code For This Effect And This Effect Called As FOCUS

.focus {
-webkit - transition: all 1s ease; - moz - transition: all 1s ease; - o - transition: all 1s ease; - ms - transition: all 1s ease;
transition: all 1s ease;
}
.focus: hover {
border: 30px solid #000;
border-radius: 50%;
}

Output like This

Figure 1

Code For This Effect And This Effect Called As MORPH

.morph {
-webkit - transition: all 1s ease; - moz - transition: all 1s ease; - o - transition: all 1s ease; - ms - transition: all 1s ease;
transition: all 1s ease;
}
.morph: hover {
border - radius: 50 % ; - webkit - transform: rotate(360deg); - moz - transform: rotate(360deg); - o - transform: rotate(360deg); - ms - transform: rotate(360deg);
transform: rotate(360deg);
}

Output like This

Figure 2

Code For This Effect And This Effect Called As TILT

.tilt {
-webkit - transition: all 1s ease; - moz - transition: all 1s ease; - o - transition: all 1s ease; - ms - transition: all 1s ease;
transition: all 1s ease;
}
.tilt: hover {
-webkit - transform: rotate(-10deg); - moz - transform: rotate(-10deg); - o - transform: rotate(-10deg); - ms - transform: rotate(-10deg);
transform: rotate(-10deg);
}

Output like This

Figure 3

Code For This Effect And This Effect Called As B&W

.mani img {
margin - top: 0px; - webkit - transition: margin 2s ease; - moz - transition: margin 2s ease; - o - transition: margin 2s ease; - ms - transition: margin 2s ease;
transition: margin 2s ease;
- webkit - transition: all 0.5s ease; - moz - transition: all 2s ease; - o - transition: all 2s ease; - ms - transition: all 2s ease;
transition: all 2s ease;
}
.mani img: hover {
margin - top: -200px;
border - radius: 50 % ; - webkit - transform: rotate(360deg); - moz - transform: rotate(360deg); - o - transform: rotate(360deg); - ms - transform: rotate(360deg);
transform: rotate(360deg);
}

Output like This

Figure 4

This Code For Two Remaining Images and This effect Called As VERTPAN

.vertpan img {
margin - top: 0px; - webkit - transition: margin 1s ease; - moz - transition: margin 1s ease; - o - transition: margin 1s ease; - ms - transition: margin 1s ease;
transition: margin 1s ease;
}
.vertpan img: hover {
margin - top: -200px;
}

Thank You