Need help with Zoom Image on Hover through CSS

[contantestar]

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.
Thanks.

[cmarchan]

@contantestar

Paid resource:

Mastering Design In Bubble | Buildcamp

[contantestar]

Thanks for guide.

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

[boston85719]

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

[lantzgould]

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

Bubble - Visual Programming

[boston85719]

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?

[vinodbhadala]

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.

[contantestar]

Thanks everyone!

@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.

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

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

[boston85719]

You can do this with a group element.

I use the classify plugin to add classes to elements.

I put a group on my page

This group has the background style to image set

Put an html element onto the page with the following code

<style>
.try {
 transition: 0.3s;
}

.try:hover {
 transform: scale(1.1);
}
</style>

And it will work on the group element.

[contantestar]

Thanks @boston85719 for coming back with additional details

Already moved forward with the project. Hope everyone else who’ll see this thread will find it helpful with all the amazing community resolutions!