/*Splash Effects*/


.oxi_image_splash [class^='oxi-image-splash-'],
.oxi_image_splash [class*=' oxi-image-splash-'] {
    overflow: hidden;
}

.oxi_image_splash [class^='oxi-image-splash-'] .oxi-image-hover-figure-caption,
.oxi_image_splash [class*=' oxi-image-splash-'] .oxi-image-hover-figure-caption {
    opacity: 0;
    transform: scale(.8);
    border-radius: 50%;
    transition: all .2s;
}

.oxi_image_splash [class^='oxi-image-splash-']:after,
.oxi_image_splash [class*=' oxi-image-splash-']:after {
    transition-delay: 150ms;
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
}

.oxi_image_splash [class^='oxi-image-splash-']:hover:after,
.oxi_image_splash [class*=' oxi-image-splash-']:hover:after {
    transition-delay: 0ms;
}

.oxi_image_splash [class^='oxi-image-splash-']:hover .oxi-image-hover-figure-caption,
.oxi_image_splash [class*=' oxi-image-splash-']:hover .oxi-image-hover-figure-caption {
    transition-delay: 150ms;
    opacity: 1;
    border-radius: 0;
    transform: scale(1);
}

.oxi_image_splash [class^='oxi-image-splash-up']:after,
.oxi_image_splash [class*=' oxi-image-splash-up']:after {
    top: 100%;
    left: 50%;
    transform: translateX(-20px);
}

.oxi_image_splash [class^='oxi-image-splash-up']:hover:after,
.oxi_image_splash [class*=' oxi-image-splash-up']:hover:after {
    top: 50%;
    transform: translate(-20px, -20px);
}

.oxi_image_splash [class^='oxi-image-splash-down']:after,
.oxi_image_splash [class*=' oxi-image-splash-down']:after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-20px);
}

.oxi_image_splash [class^='oxi-image-splash-down']:hover:after,
.oxi_image_splash [class*=' oxi-image-splash-down']:hover:after {
    bottom: 50%;
    transform: translate(-20px, 20px);
}

.oxi_image_splash [class^='oxi-image-splash-left']:after,
.oxi_image_splash [class*=' oxi-image-splash-left']:after {
    top: 50%;
    left: 100%;
    transform: translateY(-20px);
}

.oxi_image_splash [class^='oxi-image-splash-left']:hover:after,
.oxi_image_splash [class*=' oxi-image-splash-left']:hover:after {
    left: 50%;
    transform: translate(-20px, -20px);
}

.oxi_image_splash [class^='oxi-image-splash-right']:after,
.oxi_image_splash [class*=' oxi-image-splash-right']:after {
    top: 50%;
    right: 100%;
    transform: translateY(-20px);
}

.oxi_image_splash [class^='oxi-image-splash-right']:hover:after,
.oxi_image_splash [class*=' oxi-image-splash-right']:hover:after{
    right: 50%;
    transform: translate(20px, -20px);
}