eccecello
(david)
February 23, 2017, 12:24pm
1
Hallo! I’m trying to set a different pict for each of these picts here:
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
samliew
(webflowexpert.com)
February 23, 2017, 12:45pm
2
Seems like you got it figured out. Let us know if you need further help.
eccecello
(david)
February 23, 2017, 1:01pm
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!
samliew
(webflowexpert.com)
February 23, 2017, 9:52pm
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.
eccecello
(david)
February 23, 2017, 10:26pm
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?
samliew
(webflowexpert.com)
February 23, 2017, 10:50pm
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?
eccecello
(david)
February 24, 2017, 12:54pm
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
samliew
(webflowexpert.com)
February 24, 2017, 1:28pm
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:
samliew:
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.
Add div
Give div a class
Set div to absolute position
Set top,left,right,bottom position to 0
Go to element settings tab panel
Select Get Background Image from Team Members
eccecello
(david)
February 24, 2017, 2:49pm
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
eccecello
(david)
February 24, 2017, 3:00pm
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.
samliew
(webflowexpert.com)
February 24, 2017, 9:42pm
11
Yes, put the instructions inside the existing div with the background image
system
(system)
Closed
April 26, 2017, 6:50pm
12
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.