.#{$prefix}-image-250{
    height: 300px;
    @include media(lg){
        height: 250px;
    }
}
.#{$prefix}-image-300{
    height: 300px;
}
.#{$prefix}-image-640{
    height: 640px;
}
.#{$prefix}-image-500{
    height: 500px;
}

.#{$prefix}-image-section{
    position: relative;
    &:hover{
        p{
            opacity: 1;
        }
    }
    >a{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .#{$prefix}-counter{
        position: absolute;
        top: -10px;
        left: -10px;
        z-index: 1;
        
    }
    .blook-post-format-icon{
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1;
        color: $color_white;
    }
    &.#{$prefix}-image-with-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex-direction: column;
        padding: 10px 15px 15px;
    }
    &.#{$prefix}-overlay{
        &:before{
            z-index: 1;
        }
    }
    .#{$prefix}-image{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .#{$prefix}-post-desc{
        position: relative;
        z-index: 2;
    }
}

.#{$prefix}-image-hover-effect{
    overflow: hidden;
    &:after{
        position: absolute;
        top: 0;
        left: -105%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: linear-gradient(left, rgba($color_white,0) 0%, rgba($color_light_gray,0.63) 100%);
        background: -webkit-linear-gradient(left, rgba($color_white,0) 0%, rgba($color_light_gray,0.63) 100%);
        background: -moz-linear-gradient(left, rgba($color_white,0) 0%, rgba($color_light_gray,0.63) 100%);
        @include transform(skewX(-25deg));
    }
    &:hover{
        &:after{
            @include animation(hover 1s); 
        }
        &.#{$prefix}-overlay{
            &:before{
                content: none;
            }
        }
    }

}
.#{$prefix}-image-zoom-in-effect{
    overflow: hidden;
    .#{$prefix}-image{
        @include transition(transform,0.3s,linear);
        @include backface(); 
    }
    &:hover{
        .#{$prefix}-image{
            @include transform(scale(1.1,1.1));
        }
        &.#{$prefix}-overlay{
            &:before{
                content:none;
            }
        }

    }
}
.blook-image-border-hover-effect{
    overflow: hidden;
    position: relative;
    &:after{
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 50px 0 0;
        border-color: inherit;
        border-color:  $body_bg_color;
        position: absolute;
        bottom: -50px;
        right: -50px;
        z-index: 2;
        @include transition(all,0.25s,ease);
        opacity: 0;
    }
    &:hover{
        &:after{
            opacity: 1;
            bottom: 0;
            right: 0;
        }
        &.#{$prefix}-overlay{
            &:before{
                content: none;
            }
        }
    }
}
.blook-image-border-top-hover-effect{
    overflow: hidden;
    position: relative;
    &:after{
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 50px 0 0;
        border-color: inherit;
        border-color:  $body_bg_color;
        position: absolute;
        top: -50px;
        left: -50px;
        z-index: 2;
        @include transition(all,0.25s,ease);
        opacity: 0;
        @include transform(rotate(180deg));
    }
    &:hover{
        &:after{
            opacity: 1;
            top: 0;
            left: 0;
        }
        &.#{$prefix}-overlay{
            &:before{
                content: none;
            }
        }
    }
}