Hey there! Bear with me because I’m having a hard time figuring out how to explain this, but I’m working on a project where I’m attempting to create a variable hover effect for a group of thumbnails I have built.
I have the variable color bg div set up to be 100%w x 100%h, absolute positioning, and a z-index value lower than the thumbnail contents above it. I have the thumbnail contents set so that both normal and hover color values are set to transparent.
Is there any way to activate the hover object below the content when scrolling over those top-level objects? Any help at all is super appreciated! I’ve been struggling with it for a while now.
As DFink said i’m not sure what you’re trying to do, can you mention a specific example on the website? I think this would need interactions instead as you’re trying to trigger a different element than the one being hovered on. I assume you want the yellow background to be there for a specific pill hover?
Hey, sorry for not explaining well. It’s complicated. I’m basically just trying to give thumbnails a hover color based on a specified category in the cms. So in a list of businesses, for example, restaurants would hover red, stores would hover blue, etc.
I’ve looked at other threads where people have struggled to set a hover color based on a cms value, and have been trying to Waldo’s approach here – Dynamic Color on Hover?
My issue is that when I place the “hover-color” object below the other information with a lower z-index number, the hover doesn’t activate in areas where the thumnail content goes above it. In my live link you can see that you can activate the hover only on the sides of the thumbnail where the content above it doesnt overlap.
I’m working now on the interaction approach, and am still having some issues. Not totally sure what I’m doing wrong, but if I’m able to pinpoint the issue there, I’ll report back. In the mean time, If yall know of any way aside from interactions to get the hover to activate when hovering across the entire thumbnail, that would be great!
Ah thanks @Hunter_Reynolds! It does sound like the exact issue I’m trying to solve! Okay, I have the embed element in there and the code set, and I’m not getting any reponse in preview or hover. Is there any sort of styling or position setting I need to be changing? Sorry, I’m still very much learning! Thank you for your help!
Almost there! Right where you see “.thumbnail-class” - You need to change that value to whatever the name of your classes are. Looks to me like the class you’re looking for is “Card Parent” so you would need to replace that with “.card-parent”
Also, your filtering on that home pages uses exact values to show the businesses on your favorites page. This could get difficult as you begin to change the names in your CMS. I’d recommend adding a Switch field in the CMS called “Favorites?” which if selected will be used as a filter on that page.
The switch idea is great! Thank you!
Ok, I’m so sorry to keep leaning on you here, but it’s still unresponsive. I’ve moved it around and tried it on a few different elements, and I haven’t been able to get it to react anywhere. Right now, “Better Half” is the only business with a “Hover Color” value saved in the CMS, so that one should hopefully hover blue when it gets working. Posting a screenshot of what I’ve got in there! Here’s also the updated read-only link! I really do appreciate the time youre putting into helping!
Haha, I understand your embarrassment, but we’re all here to help eachother!
This is my example that is working.
This is the code I’m using for your embed block. I noticed that you have a hover-state set on the “New Business Item” CMS item, not the “Card-Parent” so I changed that in the embed code to match.
So the only CMS item with a hover color set is that “Better Half” one, which is blue. I had applied that light orange hover state to the that Single Business Item element, but that one isn’t based on the variable CMS. I think that’s what we’re seeing here. ^ once I took that universal hover color off, updated that embed element and did a search for better half, it looked like it still wasnt responding to that embed element for some reason I republished, so you can see what I mean! im really not sure what the deal is!
Gonna out this on the back-burner for now. We’re hoping to launch soon, but I may be able to incorporate it after! Thanks everyone for taking the time to look into it!
I republished, so you can see what I mean! im really not sure what the deal is!