Solved SP Page Builder

hover image addon

Asked by Laurent 4 years ago Last activity 4 years ago

Hi,

I need to create an image and make an hover effect to display another image, with an hyperlink.
which addon can be relevant?

Thanks
L.

Accepted answer

Marked as the solution
Pavel
4 years ago · edited

Hi Laurent.

Not certainly in that way.

Add the class to the addon

And try following code

Opacity effect

.image-change .sppb-addon-single-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/images/your-image.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}
.image-change .sppb-addon-single-image-container:hover::before {
    opacity: 1;
}

Scale effect

.image-change .sppb-addon-single-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/images/your-image.jpg);
    background-size: cover;
    background-position: center;
    transform: scale(0);
    pointer-events: none;
    transition: .3s;
}
.image-change .sppb-addon-single-image-container:hover::before {
  transform: scale(1);

Slide effect

.image-change .sppb-addon-single-image-container {
    overflow: hidden;
}
.image-change .sppb-addon-single-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/images/your-image.jpg);
    background-size: cover;
    background-position: center;
    transform: translateX(-100%);
    pointer-events: none;
    transition: .3s;
}
.image-change .sppb-addon-single-image-container:hover::before {
    transform: translateX(0);
}

8 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi

Thanks for contacting us. Could you please give me any demo of this?

-Regards.

Laurent Asked this
4 years ago

I have no demo, this is just a question.
I saw on image addon, this is not possible to do an hover effect with hyperlink on the image.
so how to do that?

Rashida Rahman Staff
4 years ago

Hi there!

Thanks for your query.

You may try the image overlay addon. It allows you to add overlay effects. You need to add some additional CSS to made some changes to achieve what you want though. You can add link in the title and/or content, but not in the image.

Have a nice day!

Best Regards

Laurent Asked this
4 years ago

Ok I see but this is not my need.
I need to add the hyperlink on the image.
so how to do that?

Pavel
4 years ago

Hi Laurent. You can use Image addon + CSS. Or Flip-Box addon + CSS

Laurent Asked this
4 years ago

@pavel: ok thanks
with image addin, I assume css should be something like this for hover ?

#addonId .sppb-img-responsive:hover {
  background-image: url('path_to_image;');
}
Laurent Asked this
4 years ago

@pavel many thanks sounds good ;-)

Pavel
4 years ago

Hi Laurent. You are wellcome

Log in to reply.