Streaming live at 10am (PST)

[RESOLVED] How to make lightbox thumbnails zoom on hover?


#1

Hello, I am looking to have a zoom on hover for the lightbox thumbnails once a user has selected a category on this page http://ws7.webflow.io/projects

Basically I want the same action as I have for the images for the categories on the Projects page, but on the thumbs that show once a category is selected - slightly zoom in on hover. I can not seem to find any way of editing those at all once I am in Designer mode.

Any help?
Thanks


#2

On a draft page, create a div and give it this exact class and only this class: w-lightbox-thumbnail.

You can give it temporary size and background color but remove them after.

Then give this div any :hover property you'd like your thumbnails to have.

Go back to the page were you have your lightbox, it should work.


#3

Thank you Vincent, I did try that and it didn't make a difference, which is weird as if I run a preview on the draft page with that div it does zoom in/out on hover on/off. I did even put a red background and saw it appear when loading on the projects page under the thumbs (just to make sure it is affecting them) so it doesn't make much sense. I have removed the background now but left the draft page with the hover action. Is there maybe something overriding it somehow?


#4

I successfuly did it prior to advise you (: I'll be pleased to show you how.

Can you please share your project’s public link so it's easier to do so?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#5

Alright, just a sec, I know it is sthing silly as I can see the nonsense red shadow Ive added when the thumbs are loading, so it is working, just not for the hover action. Will share it now.


#6

https://preview.webflow.com/preview/ws7?preview=5b56f1f524a0d296fed01e688c1b5569


#7

the page is called test, at the bottom of the pages list and the action I want is in global objects->interactions->portfolioHover.

Thanks!


Help with photo scale and text overlay interaction on hover and click for mobile
#8

Ok I quickly glanced and see you're trying to use INTERACTIONS for that and it won't work because interactions aren't part of CSS styles and have to be set for every object.

Instead, select your dummy div and select the hover state here

Then modify either the size, but you can just put a zoom here


#9

Perfect, that works:) Thanks a lot!


#10

how do i mark this post as solved?


#11

You can't, but I rephrased the title so it makes more sense for future users (: Thanks for asking though.


#12

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.