<CSS>

/* Extend image effect */

.wrap_img-extend:before {
    content: "X";
    display: block;
    position: absolute;
    width: calc(100% - 2 * 30px);
    height: 100vh;
    filter: brightness(2.5) saturate(0.3) blur(6px);
    background-size: cover;
}

.wrap_img-extend img {
    width: 100%;
    max-height: 100vh;
    object-fit: contain;
    position: relative;
}

</CSS><JS>

jQuery(function() {

    if (typeof(wrap_img_extend) === 'undefined')
    {
        var wrap_img_extend = true;
        
        var extended_img= jQuery(".wrap_img-extend img");
    
        if (extended_img && extended_img.length > 0) {
            document.styleSheets[0].insertRule(".wrap_img-extend:before { background-image: url('" + document.querySelector(".wrap_img-extend img").src + "'); }", 0);
        }
   }

});

</JS>