I’ve created 4 link boxes with some text inside and an image in each. When I hover over the box (not the image part), the whole box highlights with my hover layer. However, If I hover over my image, only the image layer will hover.
How can make the whole link box have the hover effect when I hover over my image? Here’s examples of what I mean:
I’m still stuck creating step indicators, so I’ve decided to either use link blocks or columns with text links inside; however, I quickly realised that with using columns, the link is only activated when I hover over the link text, that’s why I swapped to the link block (all box hover is linked, not just the text). This is a tricky one.
I’m also stuck trying to figure out how to get slider buttons positioned below a slider to move with different slide heights and one of my forms doesn’t want the label to stick to it, amongst other small things.
In terms of the image hover issue:
Click on the Step Link and scroll down in the style panel and click on Fill color, click remove this style. Hope that helps!
Bummer, not too sure how I didn’t see that. When hover over the image, the text hover obviously doesn’t appear – any way to link this all together, so when I hover over any part of the link block, all hovers appear?
Also, do you have any idea how to get slider buttons positioned below a slider to move with different slide heights? For example, the ‘Next Step’ and ‘Go Back’ buttons are currently positioned on either side, because they don’t move with the actual slider when I change steps. They just stay in one static place. I’ve tried Relative/Absolute positioning, but still nada.
Annd finally, when I try to move the Shipping Details field label + form down below the 2 drop down forms, the Shipping Details form label seems to be attached to the drop down form. Try moving them both below the drop down boxes and see if you get the same results. Really frustrating!
Hmm, my guess would be to remove the font color on hover from the Step Link element, and to instead apply the font color change on hover on the Column Style element itself but that isn’t working … so not sure what is going on there. Maybe a glitch even perhaps? @callmevlad@PixelGeek@bartekkustra - any idea guys?
Very good question on the Next Step and Back Buttons, dont think this is possible natively in Webflow.
I do have an answer for the form question however:
Remove the float (click on float and choose remove this style) on these four elements (the two side by side forms and their labels):
Next remove the 40% and 45% widths from those four elements by clicking on the word width and choosing remove this style, you’ll also have to click on the class selector for each of the two dropdown forms and remove the width on the dropdown field class as well (it’s the second option from the bottom in the class selector menu):
Next drag in a column:
And then drag the respective form labels and dropdown forms into each column
Then lastly drag the row above the shipping details form and form label:
Speaking of the button… I think I understand what did you wanted to achieve, but correct me if I’m wrong. You want the whole button to have a semi-transparent feel until you hover over the button. So the whole stuff looks like this:
→
If so, you should remove every hover style on button objects, then style it on normal view like you want it to appear when you hover over. I’ve used following:
@jaidenraleach: thank you so much, it worked perfectly!
@bartekkustra: I’m not actually looking to change opacity. I simply wanted the default text colour to be lighter and the background to be white, then on hover, the text colour darkens and the background becomes a light blue colour.
It’s not an issue that the text doesn’t receive its hover upon link box hover though, that’s just a minor problem.
@PChalk1 awesome, glad it worked! @bartekkustra’s solution is a really decent work around, because webflow doesn’t seem to want to let you change the color of the text on hover - so instead as he had said - change the color of the text on the normal state to what the color of the text was on the hover state, then decrease the opacity on the normal state so it is lighter, and on hover increase the opacity to 100 - that’ll make your text darker on hover like you were trying to achieve
→ 
