Solved SP Page Builder

Image Overlay

Asked by Michael Koerner 3 years ago Last activity 3 years ago

Hello:

Im having an annoying issue with with the Image Overlay Addon.

I'm trying to use it to setup my portfolio and I'm having an issue where the image constantly crops and resizes itself. I need to be able to upload my image have it be displayed perfectly the way the file is originally, just resize based on device being used.

I'm having this issue in two places... One spot on the Homepage, and another spot on the Portfolio page, located here: https://www.koernercreations.com/portfolio

Any help with this would be great because I cannot at this moment continue setting up my portfolio until this is fixed.

Thanks,
Michael

Accepted answer

Marked as the solution

Michael Koerner Asked this

3 years ago

So, I hired an outside developer, and he came up with the following coding to wrok around my isse.

CSS:

#column-id-1659491474855 .sppb-col-md-3 .sppb-addon-overlay-image-content,
#section-id-1658986055548 .sppb-col-md-3  .sppb-addon-overlay-image-content {
    height: 100% !important;
    padding: 0 !important;
}

#column-id-1659491474855 .sppb-col-md-3  .sppb-addon-wrapper img,
#section-id-1658986055548  .sppb-col-md-3 .sppb-addon-wrapper img {
    width: 100%;
    height: auto;
    opacity: 0;
}

#column-id-1659491474855 .sppb-col-md-3  .sppb-addon-wrapper,
#section-id-1658986055548  .sppb-col-md-3 .sppb-addon-wrapper {
    margin-bottom: 0px !important;
}

#column-id-1659491474855  .sppb-col-md-3 .overlay-background-image,
#section-id-1658986055548  .sppb-col-md-3 .overlay-background-image {
    background-size: contain;
}

#column-id-1659491474855  .sppb-col-md-3 .overlay-image-title,
#section-id-1658986055548  .sppb-col-md-3 .overlay-image-title {
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
}

#column-id-1659491474855 .sppb-col-md-3  .sppb-addon-wrapper,
#column-id-1659491474855 .sppb-col-md-3  .sppb-addon-wrapper>div,
#column-id-1659491474855  .sppb-col-md-3 .sppb-addon-wrapper>div>div,
#section-id-1658986055548  .sppb-col-md-3 .sppb-addon-wrapper,
#section-id-1658986055548 .sppb-col-md-3  .sppb-addon-wrapper>div,
#section-id-1658986055548  .sppb-col-md-3 .sppb-addon-wrapper>div>div {
    height: 100%;
}

#column-id-1659491474855 .sppb-col-md-3,
#section-id-1658986055548 .sppb-col-md-3 {
    margin-bottom: 30px;
}

#column-id-1659491474855  .sppb-col-md-3 .overlay-image-title, #section-id-1658986055548 .sppb-col-md-3  .overlay-image-title {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

#column-id-1659491474855  .sppb-col-md-3 .sppb-addon-overlay-image-content,
#section-id-1658986055548  .sppb-col-md-3 .sppb-addon-overlay-image-content {
    flex-wrap: wrap;
}

#column-id-1659491474855  .sppb-col-md-3 .sppb-addon-overlay-image-content,
#column-id-1659491474855  .sppb-col-md-3 .sppb-addon-overlay-image-content {
    height: auto !important;
}


#sp-main-body {
    overflow-x: hidden;
}

div#sp-page-builder {
    overflow: hidden;
    max-width: 100vw;
}

JS:

jQuery(document).ready(function(){
jQuery("body").addClass('hasPortfolio')
jQuery(".overlay-background-image").each(function(){
    //var bgImg = jQuery(this).css('background-image');
    var bgImg = jQuery(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');

    jQuery('<img />').attr('src', "" + bgImg + "").insertAfter(jQuery(this).parent('.overlay-background-image-wrapper'));    

});
});

jQuery(function($) {
    $(document).on("click", ".menu-deeper", function(event) {
        if (event.target.classList.contains('menu-toggler')) return;
        if (event.target.children.length) {
            event.preventDefault();
            event.stopPropagation();
            $(this)
                .toggleClass("menu-parent-open")
                .find(">.menu-child")
                .slideToggle(400);
        }
    });
});

This has worked perfectly for me and I think maybe this should be addressed in a future update so that it can be an included feature?

Hope this may help someone else...

Take care,

7 more replies

Pavel

3 years ago

Hi.

Image Overlay Addon uses image as background. Therefore it is expected behavior. You should use Image Addon instead.

Michael Koerner Asked this

3 years ago

i dont get the nice overlay and title/button like the overlay though

Pavel

3 years ago

Unfortunately, addons cannot be universal for all occasions. Therefore, in each addon, the CSS Class field is provided. By adding your own class there, you can do everything as you like using CSS coding

Rashida Rahman Staff

3 years ago

Hi Michael,

Thanks for your query.

As Pavel said, changes can be done only by using Custom CSS. We have provided some different image addons for different perposes, and they serve only those. If anything else is needed you have the css class field to mark them differently and style different!

Unfortunately, customization support is prohibited here.

Wishing you Good Luck:)

Best Regards

Pavel

3 years ago · edited

Michael here is example.

For your purposes, it is best suited Feature Box Addon. Since it uses the image as an image, has a button and a text editor.

Pre -configure all the elements you want and add the class.

Then CSS coding

.portfolio-item {
    position: relative;
    color: #fff;
}
.portfolio-item .sppb-media-content {
    position: absolute;
    bottom: 0;
    left: 0;
}
.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #2e18c669, #d913bae0);
}
.portfolio-item:hover::before {
    background: linear-gradient(45deg, #18c6b669, #13d932e0);
}
.portfolio-item .sppb-media-content .sppb-addon-title,
.portfolio-item .sppb-media-content .sppb-addon-text,
.portfolio-item .sppb-media-content .sppb-btn {
    transform: translate3d(20px, 0, 0);
}
.portfolio-item .sppb-media-content .sppb-addon-title {
    transition: .4s;
}
.portfolio-item .sppb-media-content .sppb-addon-text {
    transition: .5s;
}
.portfolio-item .sppb-media-content .sppb-btn {
    transition: .6s;
}
.portfolio-item:hover .sppb-media-content .sppb-addon-title,
.portfolio-item:hover .sppb-media-content .sppb-addon-text,
.portfolio-item:hover .sppb-media-content .sppb-btn {
    transform: translate3d(0, 0, 0);
}

And you get

Michael Koerner Asked this

3 years ago

pavel, thanks so much for your efforts now my only question is this can you still have the lightbox feature with this setup?

Pavel

3 years ago

can you still have the lightbox feature with this setup

No... Or not so simple. JS coding is required.

In general, Image Overlay Addon by default is that you need. Your idea of using the image as an image will require additional coding for mobile devices. And since the image is the element of which the size of the wrapper depends, this can cause overflow on mobile devices. You will have to reduce the font size and the button is proportional to the change in the image size. That could be unreadable.

Therefore, it is better to use Image Overlay Addon and take into account the image behavior as a background in your design