Hey, I’m havin trouble with the scale on hover state. When I apply the transforms on hover state to the project boxes (cardfront) the drop shadow works but the scaling only works on the builder preview. Anyway to fix this?
Preview link: https://preview.webflow.com/preview/lenardocilmi?preview=9b47d014e277ed44068567cc3b8d0446
I don’t know why - but its little weird structure of your code. Its not best practice to work with empty divs + BG images + fixed width and height for responsive grid (if you want more space add padding) + margin: auto 0px (align-center - what you align center? this is empty div)
In your case, if someone turns off the CSS it will see empty site (bad DOM + Bad for SEO + accessibility + W3C).
its better to use regular markup “div img+alt h2 or h3” + turn “visible: hidden” for the heading if you want only img boxes.
If you want to control the height of the div with img you can make “crop” effect with overflow hidden (use flex wrapper with align vertical). Now set the height on desktop to auto and in mobile to 150px if you want (or google “crop image css” and see a lot of tricks for this idea)
See this example i made:
https://preview.webflow.com/preview/site-ae5a37?preview=ed65c3a09b532f543405494ca4957acb
1 Like
Thanks for posting about this! It looks like your interaction is interfering with the hover state. I have reported this issue and we are looking for a fix hoping to have a resolution soon.
In the mean time as a workaround, you can remove the hover sate from the cards. Then you can add a hover interaction along with the current scroll animation like this:
This will ensure your scale transform on hover works as expected.
2 Likes
Hey Brando,
Thanks for the quick response and the tip! I’ll try adding the interaction there-
1 Like
Thanks for the response! I definitely need to restructure- thanks
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.