Streaming live at 10am (PST)

How set a different "hover" state for each pict box


#1

Hallo! I'm trying to set a different pict for each of these picts here:

http://meirat.webflow.io/#nosotras

But this "collections" settings sets the same "hover" pict for all of the 4 picts.

Can anybody tell me a simple way I could set a different "hover" pict for each pict?

https://preview.webflow.com/preview/meirat?preview=08ccd6cdae2de3c2779e214e8c90da5b

Thanks in advance!

david


#2

Seems like you got it figured out. Let us know if you need further help.


#3

What?! no no... I didn't

I want that, each time the cursor goes over one of the four picts, a different pict. is showed. But the way this "collections" work, makes that I can only set THE SAME pict for the four picts.

But I want to set a different pict for each one.

Thanks a lot!


#4

Ah, sorry I missed the word "hover".

Just create another absolute div over it, set z-index to >= 1, set the hover image, set opacity to 0.

Hover state for that div, set opacity to 1.


#5

Hallo Samliew, thanks for your reply, but the problem is that everything I do in one pict, affects the four of them... and I want each pict to have an independent "hover" state.

How can I act over each pict independently?


#6

What do you mean? You want different interactions/animations for each image?

Could you try it out in your designer and show me the published changes?


#7

Ok, now you can see it here:

http://meirat.webflow.io/#nosotras

I just did put a Div and a pict over the first pict, but as you can see, because of the design of this collection, it sets the same pict for the 4 picts!

That's my problem, I don't know how to make it work for each pict independent

Thankssssss


#8

Have you seen this?

But you don't want to use an image. Read my earlier instructions, I did not say image at all:

  1. Add div
  2. Give div a class
  3. Set div to absolute position
  4. Set top,left,right,bottom position to 0
  5. Go to element settings tab panel
  6. Select Get Background Image from Team Members

#9

Dear Samliew, I got it by adding a pict to each profile in "team member" collection, but even if I did the same 300x420 size pict, it shows bigger... when hovering over it.

Why doesn't it shows the hole 300x420 pict??

Thanks for your patience


#10

I tried to follow your steps... but I just dont get it...

When you say "create another absolute div over it", what do you mean with "it"? The "team member picture box"??

I think I need a rest. :confused:


#11

Yes, put the instructions inside the existing div with the background image


#12

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