Forum Academy Marketplace Showcase Pricing Features

Need help with Zoom Image on Hover through CSS

Hello everyone!

Would love if you could help me out with styling out the groups (image type) in bubble.

I have a repeating group, inside there is a group image type with ID attribute applied

I have the html snippet with CSS, which I found https://codepen.io/h4rb4rd/pen/abwoBzZ

So am trying to apply the hover on image effect on my group element in the repeating group

From what I know, that traditional css applied on the html div in the dom is what is seen in the codepen snippet. But i don’t really know how to translate it to Bubble elements.

I’m trying to achieve this type of zoom https://codepen.io/h4rb4rd/pen/abwoBzZ

Any tips on this topic, would be really helpful. :pray:
Thanks.

@contantestar

Paid resource:

Thanks for guide. :pray:

Not sure if this is exactly what I’m looking for ;))

I believe there is a plugin that does image zoom on hover…I believe it is called ‘magnify’…I’m not sure.

1 Like

@contantestar Here you go, I created you an example using Zeroqode’s CSS Plugin.

1 Like

This looks cool. I tried to follow the button link to the editor but get the message that user does not have permission to view the document. Is it open for public view?

Hey @contantestar,

You can do this by using the CSS Tools plugin.
Download plugin and drop CSS tool element on a page. This will give you plugin workflow action and then you can get this done.

For your easy reference quick snapshot. Element ID is id you give to this group which having image. Hope this helps you. Do let me know in case if you still need any help.


image

1 Like

Thanks everyone! :slight_smile:

@lantzgould Yep, your version works and I tried myself, but it uses Image element where I use Group Container as Image in a Repeating Group. :wink:

@vinodbhadala Thanks, looks same method as lantz’s one. :slight_smile:

Appreciate guys all the help, I’ll change some groups to image elements and will move forward with project. :pray: