How we can Make a Effective Photo Frame and Its Effects

In this blog we will learn about how we can make Effective Photo Frame and Effects.

This Code For Design HTML

<div class="focus pic">
    <img src="Images/3.jpg" height="300px" width="300px" alt="cricket" />
</div>
    <div class="morph pic">
    <img src="Images/111.jpg" height="300px" width="300px" alt="beach" />
    </div>
<div class="vertpan pic">
    <img src="Images/4.jpg" height="500px" width="300px" alt="climb" />
</div>
<br />
<div class="tilt pic">
    <img src="Images/2.jpg" height="300px" width="300px" alt="car" />
</div>
<div class="mani pic">
    <img src="Images/1.jpg" height="500px" width="500px" alt="climb" />
</div>
<div class="brighten pic">
    <img src="Images/3.jpg" height="500px" width="500px" alt="climb" />
</div>

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