I’m really close to figuring this out, just need some help getting across the finish line. I’m using a normal div to display the background, and flexing an additional div for the content. I want the content to fade in when I hover over the “parent” div. I also want the image to scale when I hover while respecting the div dimensions.
Thanks in advance for the help
Could you add a fade animation on hover and also apply a class on hover that adjusts scale? Will that do what you want?
No help, but remember that hover states won’t come into effect on phones, pads etc.
Thats what I’m doing now in the content area, but the hover only works when I hover over the child div. I want to activate everything when I hover over the parent div. The image scale works when I hover over the parent because that’s where the image lives. The issue I’m having is that the scale causes the image grow and overflow the div, I want it to scale but stay inside the div so the overflow is hidden.
Overflow hidden is available in the class editor. I had the same issue some time ago and needed to use some custom css. I would appreciate if that would be possible without custom code.
Ah! I see what you mean, it’s almost as though you need a class that will triger a custom action, your problem would be driving me nuts also
Here’s simple example on how to do that using a whee bit of css. Again (@Norm ?), it’d be great to do that without being forced to use custom code 
Non-coding app an all? 
Petty sure you can do this already, just add your parent selector class that targets the child via the Class Manager and include the hover state in the class name as well as the child class.
Stupid me. Of course does that work 
Hi Norm, would you mind posting an quick image of an example. I’m new to Blocs and I’m not sure how to do what your saying in the Class Manager.
Something like this?
card-hover-effect.bloc (218.1 KB)
This is perfect.
Thank you so much, this is exactly what I wanted…I’m reverse engineering everything you did so I can learn from it. I don’t see where your targeting the “.card-text” class when you hover over the parent. What’s causing the card text div to animate and fade in when I hover over the image?
Nice work ! - this is great !
Fantastic, these tips and tricks with demo files are really helpful to everyone, I’ve saved it for that time in the future I will possibly face the same situation, so thanks for that.
Check the class manager (cmd + 6). There’s two added classes to animate the div with the background image (card-wrapper:hover .card-background)and the div with the tex/button (card-wrapper:hover .card-text)separately.
To understand what
card-wrapper:hover .card-text
does: It just tells the browser, that whenever the div with the class .card-wrapper (the parent) is hovered to then target the child element with the class of .card-text and do whatever you want it to do, aka what’s set up in that specific class. No need to set a hover state in the class editor in this case, since you already told the browser that you want some changes in the child’s css when you hover over the parent.
I might just add some notes in the class manager to explain what I did. Dinner first though
I see what you did now, thanks. I was stuck in the mindset of only putting classes in the classes dialog box of the column and that being all I could do.
Yeah, I added a note to the project and corrected a mistake, After all it needs 3 different background classes since a different image is used on each card.
Here’s the project once more. Enjoy 
card-hover-effect.bloc (229.7 KB)
I do.
Excellent work. Thanks a lot.
Great work @pumpkin thanks for the helpful response and example project 