Rounded Images Problem

Site URL: https://www.gesihospitality.com/mobile-access

I am having a problem when trying to have a circle image on hover.

#page-section-5e8f5275daec68064fc52d42 .image-block:hover {
  filter: drop-shadow(5px 5px 8px #000000);
  border-radius: 50%;
}

@tuanphan I've looked at a lot of your answers/solutions to this but none of the solutions are working for me. No matter what i try, I can't get the image to be a circle on hover. 

You need to set the border radius for 100px instead of 50 percent

Thank you for your reply @derricksrandomviews

I tried that and it did not work. Screenshot below:

No change? 360px is a perfect circle

Nothing changed, it's as if its not picking up the border-radius code at all. 

It seems that the border-radius is only affecting the highlight border when in edit mode.

@GESI the issue is that your image is still actually a square. For this to work you should edit the images to remove the white background and then save it as a PNG which will give you a transparent background. Then your box shadow/hover effect will work

@ryandejaegher Thank you for your reply Ryan.

That is what I thought as well but in a Square Space tutorial on how to crop images into a circle (https://www.youtube.com/watch?v=1s41ZGprPLM), the images that were loaded were square originally and the border-radius code made them circles.

I will give this a try later and give an update. 

I've tried the border radius code in other sections of the website but it seems to do nothing.