Image Overlay - Question | JoomShaper
Back to the questions

Image Overlay

MK

Michael Koerner

SP Page Builder 1 year 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

0
8 Answers
Order by
Oldest Newest Votes
MK
Michael Koerner
Accepted Answer
1 year ago #95143

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,

0
Pavel
Pavel
Accepted Answer
1 year ago #93753

Hi.

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

0
MK
Michael Koerner
Accepted Answer
1 year ago #93754

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

0
Pavel
Pavel
Accepted Answer
1 year ago #93764

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #93766

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

0
Pavel
Pavel
Accepted Answer
1 year ago #93788

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

0
MK
Michael Koerner
Accepted Answer
1 year ago #93792

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

0
Pavel
Pavel
Accepted Answer
1 year ago #93795

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

0