How to Set Photo Effect Using CSS

How to set effects in photo

<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>

* {
  -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;
}

/*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%;
}
/*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);
}
/*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;
}
/*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);
}
/*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);
}

Try it and see your photo effect