/* ALBUM FADERS
-------------------------------------------------- */
 
 .zoom {

  transition: transform .4s; /* Animation */
 
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


/* [1] The container */
.img-hover-zoom {
 
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform 1.0s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}
 
 /* Colorize-zoom Container */
.img-hover-zoom--colorize img {
  transition: transform 1.0s, filter 1.0s ease-in-out;
  filter: grayscale(20%);
}

/* The Transformation */
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}
 
 
/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}
 

/* Horizontal Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-h img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 100% 0;
}

/* The Transformation */
.img-hover-zoom--zoom-n-pan-h:hover img {
  transform: scale(1.5) translateX(30%);
}


/* Vertical Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-v img {
  transition: transform .5s ease-in-out;
  transform: scale(1.4);
  transform-origin: 0 0;
}

/* The Transformation */
.img-hover-zoom--zoom-n-pan-v:hover img {
  transform: scale(1.25) translateY(-30%);
}


/* Brightness-zoom Container */
.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(70%);
}

/* The Transformation */
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}


/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transform-origin: 50% 65%;
  transition: transform 5s, filter 3s ease-in-out;
  filter: brightness(150%);
}

/* The Transformation */
.img-hover-zoom--slowmo:hover img {
  filter: brightness(100%);
  transform: scale(3);
}


/* Point-zoom Container */
.img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}

/* The Transformation */
.img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}