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.
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.
I get the impression that this is not really a technical problem. It seems to be a problem with the designed effect, right?
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?
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)
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.
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.
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.
put the image inside a div block, inside another div block. Vertically align inside div within the outer one.
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.
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.
just use that
