.ube-image {
	border: none;
	display: inline-block;
	padding: 0;
	background: transparent;

	.card-body {
		padding-left: 0;
		padding-right: 0;
		transition: all 0.3s;
		@include d-flex();
	}

	.card-img {
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		text-align: center;
		width: auto;
		max-width: 100%;
		position: relative;
		@include border-radius(0);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
			transition: .35s ease-in-out;
			z-index: 1;
		}

		img {
			@include transition(.35s ease-in-out);
		}

	}

	.card-title {
		transition: all 0.3s;
	}
}

.ube-image-caption-in {
	.card-img-overlay{
		@include d-flex();
		z-index: 2;
	}
}

/* Zoom In #1 */
.ube-image-hover-zoom-in {

	img {
		@include transform(scale(1));
		@include transition(.35s ease-in-out);
		width: 100%;
	}

	&:hover {
		img {
			@include transform(scale(1.3));
		}
	}
}

.ube-image-hover-zoom-out {
	img {
		@include transform(scale(1.5));
		@include transition(.35s ease-in-out);
		width: 100%;
	}

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

.ube-image-hover-rotate {

	img {
		@include transform(rotate(0) scale(1));
		@include transition(.35s ease-in-out);
	}

	&:hover {
		img {
			@include transform(rotate(5deg) scale(1.3));
		}
	}

}

.ube-image-hover-gray-scale {
	.card-img {
		img {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
			-webkit-transition: .35s ease-in-out;
			transition: .35s ease-in-out;
		}

	}

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

.ube-image-hover-opacity {
	.card-img {
		img {
			opacity: 1;
			@include transition(.35s ease-in-out);
		}


	}

	&:hover {
		img {
			opacity: .5;
		}
	}
}


.ube-image-hover-shine {
	.card-img {
		position: relative;

		&::before {
			left: -100%;
			z-index: 2;
			display: block;
			content: '';
			width: 50%;
			height: 100%;
			background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
			background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
			-webkit-transform: skewX(-25deg);
			transform: skewX(-25deg);
		}


	}

	&:hover {
		.card-img::before {
			-webkit-animation: ube-shine .35s;
			animation: ube-shine .35s;
		}
	}
}

@-webkit-keyframes ube-shine {
	100% {
		left: 125%;
	}
}

@keyframes ube-shine {
	100% {
		left: 125%;
	}
}

.ube-image-hover-circle {
	.card-img {
		position: relative;

		&::before {
			top: 50%;
			left: 50%;
			z-index: 2;
			display: block;
			width: 0;
			height: 0;
			background: rgba(255, 255, 255, .2);
			border-radius: 100%;
			@include transform(translate(-50%, -50%));
			opacity: 0;
		}

	}

	&:hover {
		.card-img::before {
			-webkit-animation: ube-circle .35s;
			animation: ube-circle .35s;
		}
	}
}


@-webkit-keyframes ube-circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

@keyframes ube-circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

.ube-image-hover-flash:hover .card-img {
	opacity: 1;
	-webkit-animation: ube-flash .35s;
	animation: ube-flash .35s;
}

@-webkit-keyframes ube-flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

@keyframes ube-flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

//slide right
.ube-image-hover-slide-right {
	img {
		@include transition(opacity .35s, transform .35s);
		@include transform(translate3d(-10%, 0, 0) scale(1.2));
		@include backface-visibility(hidden);
	}

	&:hover img {
		@include transform(translate3d(0, 0, 0) scale(1.2));
	}
}

//slide left
.ube-image-hover-slide-left {
	img {
		@include transition(opacity .35s, transform .35s);
		@include transform(translate3d(0, 0, 0) scale(1.2));
		@include backface-visibility(hidden);
	}

	&:hover img {
		@include transform(translate3d(-10%, 0, 0) scale(1.2));
	}
}

//slide top
.ube-image-hover-slide-top {
	img {
		@include transition(opacity .35s, transform .35s);
		@include transform(translate3d(0, 0, 0) scale(1.25));
		@include backface-visibility(hidden);
	}

	&:hover img {
		@include transform(translate3d(0, -10%, 0) scale(1.25));
	}
}

//slide top
.ube-image-hover-slide-bottom {
	img {
		@include transition(opacity .35s, transform .35s);
		@include transform(translate3d(0, -10%, 0) scale(1.25));
		@include backface-visibility(hidden);
	}

	&:hover img {
		@include transform(translate3d(0, 0, 0) scale(1.25));
	}
}