I am attempting to use the CMS image field to generate a mouse over state for the BG image using the dynamic style settings.
Is this possible?
If not, how can I use two image fields in the CMS to generate a none and hover state?
Here is my public share link: https://preview.webflow.com/preview/shutterlab-creative?preview=f3fa576aa1e0ad07fd43ef98fe7d8204
(how to access public share link)
You can do this with interactions. Just have a hover state switch the CMS item.
Thanks! Figured there’d be something simple I was missing.
Thanks for your fast response. I’m working to attempt this now, but I think I’m missing a step. Here’s where I’m at:
I think I may be looking in the wrong place, but I’m brand new to the interface/workflow. When I select ‘opacity’ it seems to still limit the BG image to one CMS image field.
Do I need to do this with show/hide using multiple link blocks referencing different CMS fields?
Hey @mgarske, try this.
Set up two different elements each with the different bkgd img from the CMS. Then use interactions to reveal (with show/hide) or fade (with opacity) actions.
Hope that helps. Happy designing!
I’m still doing something wrong. Here’s the setup I have:
2 link blocks in the collection item. Each with a different BG image.
2 sets of hover state animations, in out for each link block class. (all set to work with class, 2 classes)
two sets of ‘hide/show’ and ‘opacity’ to bring each link block in and out of visibility and ‘flex’
The opacity transitions are all set to 0.4 duration ‘ease in out’
When I test the blocks just disappear on mouse over.
It seems like controlling button states/image BG with the CMS would be a simple matter. This setup seems excessive. Has anyone attempted this before, any tutorials out there?
With this approach, I’m sure there’s some sort of portion of the hierarchy I have incorrect.
You need to place the hover interaction on Collection Item 2 and have it affect the link blocks. Should only be two animations, one for hover in, and one for hover out.
@mgarske Here’s the structure.
The two background divs are set to position absolute and full. Make sure the z-index of the top div is higher. Make sure to give the link block a position of relative.
Now add a placeholder background image to both divs. Set it to cover, centered, and no tiling.
Then connect the background image on the settings panel to the CMS.
Lastly add an interaction to the link block which will hide the top background and reveal the one underneath upon hover. I used opacity but it could be any creative transition you can think of. If using a scale or move effect, remember to turn on overflow:hidden for the link block to trim the effect inside the button.
Then duplicate and reverse the interaction for the hover off. Here’s the result.
Hope that helps.
Amazing! thanks so much!
