/**
 * @# Hover Efects
 **/
.wolf-core-img {
	display: block;
	backface-visibility: hidden;
}

/* Zoom in */
.wolf-core-img-hover-effect-zoomin {
	overflow: hidden;

	img {
		transition: transform 0.3s ease;
		transform: scale(1);
	}

	&:hover img {
		transform: scale(1.1);
	}
}

/* Zoom out */
.wolf-core-img-hover-effect-zoomout {
	overflow: hidden;

	img {
		transition: transform 0.3s ease;
		transform: scale(1.1);
	}

	&:hover img {
		transform: scale(1);
	}
}

/* Move */
.wolf-core-img-hover-effect-move-right {
	overflow: hidden;

	img {
		transition: transform 0.3s ease;
		transform: scale(1.1) translateX(0);
	}

	&:hover img {
		transform: scale(1.1) translateX(3%);
	}
}

.wolf-core-img-hover-effect-move-left {
	overflow: hidden;

	img {
		transition: transform 0.3s ease;
		transform: scale(1.1) translateX(0);
	}

	&:hover img {
		transform: scale(1.1) translateX(-3%);
	}
}

.wolf-core-img-hover-effect-move-up {
	overflow: hidden;

	img {
		transition: transform 0.3s ease;
		transform: scale(1.1) translateY(0);
	}

	&:hover img {
		transform: scale(1.1) translateY(-3%);
	}
}

.wolf-core-img-hover-effect-move-down {
	overflow: hidden;

	img {
		transition: transform 0.3s ease;
		transform: scale(1.1) translateY(0);
	}

	&:hover img {
		transform: scale(1.1) translateY(-3%);
	}
}

/* Up */
.wolf-core-img-hover-effect-up {
	transition: transform 0.3s ease;

	&:hover {
		transform: translateY(-0.5em);
	}
}

/* Opacity */
.wolf-core-img-hover-effect-opacity {
	img {
		transition: opacity 0.3s ease;
	}

	&:hover img {
		opacity: 0.66 !important;
	}
}

/* Opacity */
.wolf-core-img-hover-effect-opacity-reverse {
	img {
		opacity: 0.66;
		transition: opacity 0.3s ease;
	}

	&:hover img {
		opacity: 1 !important;
	}
}

/* Greyscale */
.wolf-core-img-hover-effect-greyscale {
	img {
		transition: filter 0.3s ease;
		@include greyscale();
	}

	&:hover img {
		@include no-greyscale();
	}
}

/* To Greyscale */
.wolf-core-img-hover-effect-to-greyscale {
	img {
		transition: filter 0.3s ease;
		@include no-greyscale();
	}

	&:hover img {
		@include greyscale();
	}
}

/* Image Overlay hover effect */

.wolf-core-single-image-overlay-true {
	.wolf-core-si-img-inner {
		overflow: hidden;
		display: block;
	}

	/* Zoom in */
	&.wolf-core-single-image-hover-effect-zoomin {
		overflow: hidden;

		img {
			transition: transform 0.3s ease;
			transform: scale(1);
		}

		&:hover img {
			transform: scale(1.1);
		}
	}

	/* Zoom out */
	&.wolf-core-single-image-hover-effect-zoomout {
		img {
			transition: transform 0.3s ease;
			transform: scale(1.1);
		}

		&:hover {
			img {
				transition: transform 0.3s ease;
				transform: scale(1);
			}
		}
	}

	/* Move */
	&.wolf-core-single-image-hover-effect-move-left {
		img {
			transition: transform 0.3s ease;
			transform: scale(1.1) translateX(0);
		}

		&:hover {
			img {
				transition: transform 0.3s ease;
				transform: scale(1.1) translateX(-3%);
			}
		}
	}

	&.wolf-core-single-image-hover-effect-move-right {
		img {
			transition: transform 0.3s ease;
			transform: scale(1.1) translateX(0);
		}

		&:hover {
			img {
				transition: transform 0.3s ease;
				transform: scale(1.1) translateX(3%);
			}
		}
	}

	&.wolf-core-single-image-hover-effect-move-up {
		img {
			transition: transform 0.3s ease;
			transform: scale(1.1) translateY(0);
		}

		&:hover {
			img {
				transition: transform 0.3s ease;
				transform: scale(1.1) translateY(-3%);
			}
		}
	}

	&.wolf-core-single-image-hover-effect-move-down {
		img {
			transition: transform 0.3s ease;
			transform: scale(1.1) translateY(0);
		}

		&:hover {
			img {
				transition: transform 0.3s ease;
				transform: scale(1.1) translateY(3%);
			}
		}
	}

	/* Up */
	&.wolf-core-single-image-hover-effect-up {
		transition: transform 0.3s ease;

		&:hover {
			transform: translateY(-0.5em);
		}
	}

	/* Opacity */
	&.wolf-core-single-image-hover-effect-opacity {
		img {
			transition: opacity 0.3s ease;
		}

		&:hover img {
			opacity: 0.66 !important;
		}
	}

	/* Greyscale */
	&.wolf-core-single-image-hover-effect-greyscale {
		img {
			transition: filter 0.3s ease;
			@include greyscale();
		}

		&:hover img {
			@include no-greyscale();
		}
	}

	/* To Greyscale */
	&.wolf-core-single-image-hover-effect-to-greyscale {
		img {
			transition: filter 0.3s ease;
			@include no-greyscale();
		}

		&:hover img {
			@include greyscale();
		}
	}
}