Round button with image transition

Hi guys,

apologies, if I am asking for something weird again - I am illustrator, not a web designer…

So I am trying to create a hoverable completely round button with image transition inside (see my example below).
This button should react on hover by zooming its size.

Does anyone have an idea how to accomplish this?

Thanks a lot!

This is easy I think by adding glasses to the button. You can adjust the image size on Hover and make it bigger so you get the zoom in effect. @Eldar has a lesson video showing this. I’m not near my iMac so can not show pictures

2 Likes

Hi @Maxim,

As @r_botman said, that’s quite easy to do in Blocs. You can set an image as a background for button for both normal and hover state, resulting in the similar result. I have a tutorial about it in Mastering Blocs 3 course, but there is also a free tutorial on YouTube, which I have made for Blocs 2. I think it is more than enough to understand how to do that.

Cheers,
Eldar

2 Likes

@r_botman, @Eldar

thanks you for your fast replies! This is a nice tutorial indeed!

Nevertheless I think I wasn’t clear enough: hover effect should only affect size (which is easy to do).

But in my case button must be round and image transition inside the button - be automatic (e.g. carousel). This is what I am struggling to create…

Do you think it is possible to do with Blocs?