/* The Image container */
.img-hover-zoom {
    overflow: hidden; /* Removing this will break the effects */
}
.img-hover-zoom img {
    transition: transform .5s ease;
}
.img-hover-zoom:hover img {
    transform: scale(1.5);
}


/* Quick-zoom Container */
.img-hover-zoom--quick-zoom img {
    transform-origin: 0 0;
    transition: transform .25s, visibility .25s ease-in;
}
.img-hover-zoom--quick-zoom:hover img {
    transform: scale(2);
}

/* 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);
}
/* 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);
}
/* 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);
}
/* Brightness-zoom Container */
.img-hover-zoom--brightness img {
    transition: transform 2s, filter 1.5s ease-in-out;
    transform-origin: center center;
    filter: brightness(50%);
}

/* The Transformation */
.img-hover-zoom--brightness:hover img {
    filter: brightness(100%);
    transform: scale(1.3);
}
/* 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%);
}
/* Blur-zoom Container */
.img-hover-zoom--blur img {
    transition: transform 1s, filter 2s ease-in-out;
    filter: blur(2px);
    transform: scale(1.2);
}

/* The Transformation */
.img-hover-zoom--blur:hover img {
    filter: blur(0);
    transform: scale(1);
}
/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
    transition: transform .5s, filter 1.5s ease-in-out;
    filter: grayscale(100%);
}

/* The Transformation */
.img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    transform: scale(1.1);
}