/*
*  Theme Effect
*/
// zoom
.zoom,.zoom-2{
    overflow: hidden;
    display: block;
    img{
        position: relative;
        width: percentage(1);
        .transition(all .2s ease-out);
        .transform-origin(~"center,center");
    }
    &:hover{
        img{
            .scale(1.2);
        }
    }
}

// zoom 2
.zoom-2{
    img{
        .transition(all 0.5s ease-out);
    }
    &:hover{
        img{
            .scale(1.4,1.4);
        }
    }
}

// Plus Button Effects
.image-plus-1{
    position: relative;
    &:before{
        overflow: hidden;
        position: absolute;
        top: 0;
        content: "";
        z-index: 100;
        left: 0;
        .size(percentage(1),percentage(1));
        .opacity(0);
        .transition(~"all 0.3s ease 0s");
        .transform(~"scale(0.5) rotateY(180deg)");
        background: url('@{image-theme-path-base}plus.png') no-repeat scroll center center / 60px 60px rgba(0,0,0, .6);
    }
    &:hover{
        &:before{
            visibility: visible;
            .opacity(.6);
            .transform(scale(1) rotateY(0deg));
        }
    }
}

.image-plus-2{
    position: relative;
    &:before{
        content: "";
        z-index: 199;
        top: 0;
        left: 0;
        position: absolute;
        background: url('@{image-theme-path-base}plus.png') no-repeat scroll center center / 60px 60px rgba(0,0,0, .8);
        .square(percentage(1));
        .transition(~"all 0.3s ease 0s");
        .opacity(0);
        .background-size(~"10px 10px, 100% 100%");
        .background-origin(~"padding-box, padding-box");
    }
    &:hover{
        &:before{
            visibility: visible;
            .opacity(.6);
            .background-size(~"60px 60px, 100% 100%");
        }
    }
}

.image-plus-3{
    position: relative;
    &:before{
        content: "";
        top: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
        z-index: 100;
        .transform(~"scale(0.5) rotateX(180deg)");
        .square(percentage(1));
        .opacity(0);
        .transition(~"all 0.3s ease 0s");
        background: url('@{image-theme-path-base}plus.png') no-repeat scroll center center / 60px 60px rgba(0,0,0, .8);
    }
    &:hover{
        &:before{
            visibility: visible;
            .opacity(.6);
            .transform(~"scale(1) rotateX(0deg)");
        }
    }
}


/*---------------*/
/***** Bubba *****/
/*---------------*/

.effect-bubba(){
	img{
		.opacity(1);
		.transition(~"all .5s");
	}
	> div{
		&::before,
		&::after{
			position: absolute;
			top: 30px;
			right: 30px;
			bottom: 30px;
			left: 30px;
			content: '';
			.opacity(0);
			.transition(~"opacity 0.35s, transform 0.35s");
		}
		&::before{
			border-top: 1px solid @white;
			border-bottom: 1px solid @white;
			.scale(0,1);
		}
		&::after{
			border-right: 1px solid @white;
			border-left: 1px solid @white;
			.scale(1,0);
		}
	}
	&:hover{
		background-color: @theme-color;
		img{
			.opacity(.4);
		}
		> div{
			&::before,
			&::after{
				.opacity(1);
				.scale(1);
			}
		}
	}
}