Rectangle to circle on hover?

I have been given a design to build out which includes a rectangle to circle transition on hover.

This seems to create two problems for me:

  1. I know how to make a square into a circle, but not a taller rectangle like this. Is it even possible?

So far, since I don’t know how to get all the way to a circle, I am getting this kind of oblong shape on hover.

  1. But even getting that far, I have already encountered another problem. Because the image is getting smaller on hover, this creates areas in the corners where the cursor is both over and not over the image. As a result, you get this flicker effect when the cursor is over the corners.

Monosnap screencast 2022-12-13 00-35-00

I get the impression that this is not really a technical problem. It seems to be a problem with the designed effect, right?

Thank you so much for your thoughts!

Here is my public share link

Hi there,
hope this helps:

Basic idea: you need a perfect square with fixed height/width → on hover apply a radius of 100% → Play with the transition speed

It’s always easier to use the image as a bg element inside the grid item. you’ll have better control over it, though we sacrifice the Alt text property for SEO but it’s not that huge of a loss in terms of images.

Thank you so much for taking the time. So just to confirm: are you saying it is not possible to transition from rectangle to a circle unless it is a perfect square?

Will the method you have demonstrated solve the problem with the flickering corners too? Or was this just to show me how to make the circle?

Either way, thank you so much again.

1 Like

yes, you need a perfect square to create a circle, this is more math than web development so bare with me, in short the circle aspect ratio is 1, so is for the square

if the aspect ratio is not 1, we get rectangles (HxW) and Ellipses (Major Radiun X Minor Radius)

The flickering is also solved, you just need to play a little with the transition speed & the mode (usually ease in / ease work well. But there are many more)

Hope this helps! : D

Hey thank you so much. If you have a look now you will see that I found a way to transition directly from the rectangle to the circle using a vertical transformation at the same time as I rounded the corners. I also go from black and white to colour at the same time.

There is still a flicker if you move the curse around in the corners but I slowed down the transition so it is not as intense.

If you want to see what I did, have a look here.


that’s another way around it! Well done!

Regarding the flicker, add another transition for Transform with the same speed as the radius transition. with 500 - ease for both it looks good

but I also, I think 300 - ease in looks even better

You can play with the values until you find something you like

Actually, I don’t see how I can add a duration for the Transform. It’s obvious for the radius transition – do I have to do it differently?

sorry for the late reply, it’s been a busy weekend.

Ah, yes there’s an option for the transform transition as well :slight_smile: just use that

The reason for the flicker is simple. You created an on-hover animation, but once you hover on the edge of the rectangle, it turns into a circle and you are no more hovering on the element. The flicker will not happen if you hover over the center of the rectangle.

To fix this, Create a Webflow interaction and use another element that will not change in shape as a trigger. Probably a div that wraps the whole rectangle

Hmmm. This is a great idea. I can certainly do the scale animation this way — so it solves the problem with the rectangle to square.

But it is possible to do the square to circle part (rounding the corners) with a Webflow interaction… if there is I can’t see how to do it. If not, I will still have the problem with the flickering on the corners of the square / circle.

Aagh! I just realized I was actually compressing the height of the image when I transition to
square – not just showing less of it like i thought I was. It was hard to tell with the placeholder images, so I put in an actual image to test.

Monosnap screencast 2022-12-20 21-35-34

Is there a way to reduce the size of the surrounding div block but not the size of the image inside with an interaction? I would like the surrounding div block to be a kind of mask.

OK, so in the end I needed to do as follows:

  1. put the image inside a div block, inside another div block. Vertically align inside div within the outer one.

  2. put an interaction on the outermost of the div blocks which reduced the height of the div block inside using a SIZE not a SCALE animation. This made it look like a square. Image is set to “cover” and overflow is hidden. (The scale effects the image inside as shown above). Add a simultaneous MOVE animation which moves the image up so that it isn’t pushed down by the SIZE animation. You will see I haven’t got this move precisely right yet… so the image appears to lift a bit. Ideally it would appear stationery.

  3. Add a hover state to the div just outside the image which rounded the corners 100% to make the square appear as a circle.

Doing it this way also seems to have resolved the flicker on the corners of the circle / square although I do not know why.

Anyway, thanks so much to everyone for the help!

Monosnap screencast 2022-12-24 00-47-01