The rounded edges of the image disappear

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
VictorKrs
 
 
Posts: 304
Joined: Sun May 17, 2020 8:08 pm

The rounded edges of the image disappear

Post by VictorKrs »

Hello, Pablo!

In my project, when applying a warp, the rounded corners of the image turn into sharp corners when hovering over the mouse. This feature is also visible in the template https://wysiwygwebbuilder.com/support/w ... ndon.html In the "Shop for Unique Holiday Gifts" section.
It seems to me that the rounded corners should still remain when hovering the mouse, otherwise it turns out to be somehow illogical.
That is, the border should be a kind of mask, and not the edge of the image, which disappears when hovering the mouse.
If this cannot be fixed, then how can rounded corners be preserved?
CSS code "overflow: hidden" doesn't work, custom image style doesn't work either…

Link to project: https://drive.google.com/file/d/1r2OTGn ... p=sharing

Please advise the solution if!
User avatar
Pablo
 
Posts: 23222
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: The rounded edges of the image disappear

Post by Pablo »

Rounded corners is not a mask. It's standard HTML feature border-radius which is applied to the image.

When you use the zoom effect then the image is scaled and therefor the rounded corners fall outside the view area.

The reason why the border-radius is not applied to the image's container is because then the corners would not be visible if you use max-width.
User avatar
VictorKrs
 
 
Posts: 304
Joined: Sun May 17, 2020 8:08 pm

Re: The rounded edges of the image disappear

Post by VictorKrs »

Thanks for the clarifications!
User avatar
wwonderfull
 
 
Posts: 1555
Joined: Fri Aug 21, 2020 8:27 am
Contact:

Re: The rounded edges of the image disappear

Post by wwonderfull »

VictorKrs wrote: Tue Feb 04, 2025 8:24 am Thanks for the clarifications!
@VictorKrs I think I checked the html structure of it and with a bit of custom codes it could be possible. It is happening because the container itself does not have the radius which is the reason the overflow comes full on the corner.

I have sent a solution to your email check and see if it works for now.
User avatar
jerryco
 
 
Posts: 896
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: The rounded edges of the image disappear

Post by jerryco »

wwonderfull wrote: Tue Feb 04, 2025 11:34 am
VictorKrs wrote: Tue Feb 04, 2025 8:24 am Thanks for the clarifications!
@VictorKrs I think I checked the html structure of it and with a bit of custom codes it could be possible. It is happening because the container itself does not have the radius which is the reason the overflow comes full on the corner.

I have sent a solution to your email check and see if it works for now.
Now that's a champion!
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->

Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
User avatar
BaconFries
 
 
Posts: 5867
Joined: Thu Aug 16, 2007 7:32 pm

Re: The rounded edges of the image disappear

Post by BaconFries »

Now that's a champion!
I saw that reply coming it was written in the card's (tarot)
User avatar
VictorKrs
 
 
Posts: 304
Joined: Sun May 17, 2020 8:08 pm

Re: The rounded edges of the image disappear

Post by VictorKrs »

wwonderfull wrote: Tue Feb 04, 2025 11:34 am
VictorKrs wrote: Tue Feb 04, 2025 8:24 am Thanks for the clarifications!
@VictorKrs I think I checked the html structure of it and with a bit of custom codes it could be possible. It is happening because the container itself does not have the radius which is the reason the overflow comes full on the corner.

I have sent a solution to your email check and see if it works for now.
Dear, wonderful! I join the assessment of @jerryco, and I finish myself off - you are a superhero :!:
That's what it means - "knowledge is power"!
Thank you sincerely for your help in solving the issue!
I think your solution will be useful not only to me, but also to other users who like to hide the corners of elements (how good it was when there was a fashion for sharp corners in design :D ).
Post Reply