.dnetor-image {
    display: block;
    overflow: hidden;
}

.dnetor-effect-zoom-in {
    img,
    .image {
        @include transform(scale(1));
        @include transition(0.3s ease-in-out);
        width: 100%;
    }
    &:hover img,
    &:hover .image {
        @include transform(scale(1.1));
    }
}

.dnetor-effect-zoom-out {
    img,
    .image {
        @include transform(scale(1.1));
        @include transition(0.3s ease-in-out);
        width: 100%;
    }

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

.dnetor-effect-rotate {
    img,
    .image {
        @include transform(rotate(0) scale(1));
        @include transition(0.3s ease-in-out);
    }
    &:hover img,
    &:hover .image {
        @include transform(rotate(5deg) scale(1.1));
    }
}

.dnetor-effect-slide-right {
    img,
    .image {
        @include transition(all 0.3s);
        @include transform(translate3d(-10%, 0, 0) scale(1.1));
    }
    &:hover img,
    &:hover .image {
        @include transform(translate3d(0, 0, 0) scale(1.1));
    }
}

.dnetor-effect-slide-left {
    img,
    .image {
        @include transition(all 0.3s);
        @include transform(translate3d(0, 0, 0) scale(1.1));
    }

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

.dnetor-effect-slide-top {
    img,
    .image {
        @include transition(all 0.3s);
        @include transform(translate3d(0, 0, 0) scale(1.1));
    }

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


.dnetor-effect-slide-bottom {
    img,
    .image,
    &:hover .image {
        @include transition(all 0.3s);
        @include transform(translate3d(0, -10%, 0) scale(1.1));
    }

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

@keyframes dnetor-animation-fade-in-up{
    from {
        opacity: 0;
        @include transform(translate3d(0, 30px, 0));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dnetor-effect-fade-in-up {
    animation-name: dnetor-animation-fade-in-up;
    &.animated {
        animation-duration: 1s;
    }
}

@keyframes dnetor-animation-fade-in-down {
    from {
        opacity: 0;
        @include transform(translate3d(0, -30px, 0));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dnetor-effect-fade-in-down {
    animation-name: dnetor-animation-fade-in-down;

    &.animated {
        animation-duration: 1s;
    }
}

@keyframes dnetor-animation-fade-in-left {
    from {
        opacity: 0;
        @include transform(translate3d(-30px, 0, 0));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dnetor-effect-fade-in-left {
    animation-name: dnetor-animation-fade-in-left;

    &.animated {
        animation-duration: 1s;
    }
}

@keyframes dnetor-animation-fade-in-right {
    from {
        opacity: 0;
        @include transform(translate3d(30px, 0, 0));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dnetor-effect-fade-in-right {
    animation-name: dnetor-animation-fade-in-right;

    &.animated {
        animation-duration: 1s;
    }
}