Define radius for image overlay - Forum | JoomShaper
Solved SP Page Builder

Define radius for image overlay

Asked by Seppe 2 years ago Last activity 2 years ago

Good morning

For my team, I used a "person" element.
Everything is defined and the image has a radius of 100.

However, when I want to define the "overlay", it keeps the rectangle shape.
Is it possible to give the overlay the same radius as the image?

Visually, it looks like a disaster now, having a rectangle overlay on a rounded image.

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff

As alternative Custom CSS you can use that:

.sppb-addon-person .sppb-person-image {border-radius: 100px;}

Use it inside Page Settings > Page CSS > Custom CSS

4 more replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue? I need to check is it possible or not.

-Regards.

Seppe Asked this

Good morning
Thnx for the reply
Please see details below

Mehtaz Afsana Borsha Staff

Hi

Use this CSS in your custom.css file

.sppb-addon .person-content-show-on-hover {
    border-radius: 100px !important;
}
Seppe Asked this

thank you
works perfect.

I assume Mehtaz Afsana Borsha's answer also works :)

Mehtaz Afsana Borsha Staff

Glad to know that.

Log in to reply.