<div class="grow pic">
  <img src="Ссылка на картинку" />
</div>
<div class="shrink pic">
  <img src="Ссылка на картинку" />
</div>
<div class="sidepan pic">
  <img src="Ссылка на картинку" />
</div>
<div class="vertpan pic">
  <img src="Ссылка на картинку" />
</div>

/*PIC*/
  .pic {
  height: 150px;
  width: 150px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 0px 0px 5px #111;
  float: left;
}
.pic:hover {
  cursor: pointer;
}
/*GROW*/
  .grow img {
  height: 300px;
  width: 300px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}
/*SHRINK*/
  .shrink img {
  height: 400px;
  width: 400px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.shrink img:hover {
  width: 300px;
  height: 300px;
}
/*BLUR*/
  .blur img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(5px);
}
/*TILT*/
  .tilt {
  -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;
}
.tilt:hover {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
/*MORPH*/
  .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-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
/*SIDEPAN*/
  .sidepan img {
  margin-left: 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;
}
.sidepan img:hover {
  margin-left: -200px;
}
/*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;
}
/*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: 70px solid #000;
  border-radius: 50%;
}
/*B&W*/
  .bw {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.bw:hover {
  -webkit-filter: grayscale(100%);
}
/*DARKEN*/
  .brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.brighten img:hover {
  -webkit-filter: brightness(0%);
}
/*SEPIA*/
  .sepia img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.sepia img:hover {
  -webkit-filter: sepia(100%);
}
/*CONTRAST*/
  .contrast img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.contrast img:hover {
  -webkit-filter: contrast(185%);
}
/*HUE_ROTATE*/
  .hue-rotate img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.hue-rotate img:hover {
  -webkit-filter: hue-rotate(65deg);
}
/*INVERT*/
  .invert img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.invert img:hover {
  -webkit-filter: invert(100%);
}
/*OPACITY*/
  .opacity img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.opacity img:hover {
  opacity: 0.25;
}