.images-demo code {
  margin-bottom: 10px;
  display: inline-block;
}

.fx-demo {
  margin: 0 20px 20px 0;
  float: left;
  height: 200px;
  width: 300px;
  overflow: hidden;
}

.fx-demo > div {
  height: 200px;
  width: 100%;
  overflow: hidden;
  display: block;
}

.fx-demo > div img {
  width: 100%;
}

.hover-fx-transition, .zoom-in-1 > img, .zoom-in-2 > img, .zoom-out-1 > img, .zoom-out-2 > img, .zoom-out-3 > img, .slide-right > img, .slide-left > img, .slide-up > img, .slide-down > img, .rotate-1 > img, .rotate-2 > img, .blur-1 > img, .grayscale-1 > img, .sepia-1 > img {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.linear-transition, .opacity-1 > img, .opacity-2 > img {
  -webkit-transition: .2s linear;
  transition: .2s linear;
}

.zoom-in-1 {
  overflow: hidden;
}

.zoom-in-1 > img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.zoom-in-1:hover img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.zoom-in-2 > img {
  min-width: 300px;
  height: auto;
}

.zoom-in-2:hover img {
  min-width: 350px;
}

.zoom-out-1 > img {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.zoom-out-1:hover img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.zoom-out-2 > img {
  min-width: 400px;
  height: auto;
}

.zoom-out-2:hover img {
  min-width: 300px;
}

.zoom-out-3 > img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.zoom-out-3:hover img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.slide-right > img {
  -webkit-transform: scale(1.5) translate3d(30px, 0, 0);
          transform: scale(1.5) translate3d(30px, 0, 0);
}

.slide-right:hover img {
  -webkit-transform: scale(1.5) translate3d(0px, 0, 0);
          transform: scale(1.5) translate3d(0px, 0, 0);
}

.slide-left > img {
  -webkit-transform: scale(1.5) translate3d(-30px, 0, 0);
          transform: scale(1.5) translate3d(-30px, 0, 0);
}

.slide-left:hover img {
  -webkit-transform: scale(1.5) translate3d(0px, 0, 0);
          transform: scale(1.5) translate3d(0px, 0, 0);
}

.slide-up > img {
  -webkit-transform: scale(1.5) translate3d(0, 30px, 0);
          transform: scale(1.5) translate3d(0, 30px, 0);
}

.slide-up:hover img {
  -webkit-transform: scale(1.5) translate3d(0, 0px, 0);
          transform: scale(1.5) translate3d(0, 0px, 0);
}

.slide-down > img {
  -webkit-transform: scale(1.5) translate3d(0, -30px, 0);
          transform: scale(1.5) translate3d(0, -30px, 0);
}

.slide-down:hover img {
  -webkit-transform: scale(1.5) translate3d(0, 0px, 0);
          transform: scale(1.5) translate3d(0, 0px, 0);
}

.rotate-1 {
  overflow: hidden;
}

.rotate-1 > img {
  -webkit-transform: rotate(15deg) scale(1.4);
          transform: rotate(15deg) scale(1.4);
}

.rotate-1:hover img {
  -webkit-transform: rotate(0) scale(1);
          transform: rotate(0) scale(1);
}

.rotate-2 > img {
  -webkit-transform: rotate(-15deg) scale(1.4);
          transform: rotate(-15deg) scale(1.4);
}

.rotate-2:hover img {
  -webkit-transform: rotate(0) scale(1);
          transform: rotate(0) scale(1);
}

.rotate-3 > img {
  -webkit-transform: rotate(360deg) scale(1.5);
          transform: rotate(360deg) scale(1.5);
  -webkit-transition: .3s linear;
  transition: .3s linear;
}

.rotate-3:hover img {
  -webkit-transform: rotate(0) scale(1);
          transform: rotate(0) scale(1);
}

.rotate-4 > img {
  -webkit-transform: rotate(720deg) scale(1.5);
          transform: rotate(720deg) scale(1.5);
  -webkit-transition: .3s linear;
  transition: .3s linear;
}

.rotate-4:hover img {
  -webkit-transform: rotate(0) scale(1);
          transform: rotate(0) scale(1);
}

.blur-1 > img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.blur-1:hover img {
  -webkit-filter: blur(0);
  filter: blur(0);
}

.grayscale-1 > img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-1:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.sepia-1 > img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-1:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

.opacity-1 > img {
  opacity: 1;
}

.opacity-1:hover img {
  opacity: .5;
}

.opacity-2 > img {
  opacity: 0.5;
}

.opacity-2:hover img {
  opacity: 1;
}