How to get a solid colour over a 1:1 box. A mystery

Hi
I am completely new to this. I am trying to get a hover effect with text on a darker background covering the entire image. (images are made for testing purposes and have not added text yet - expect I will run into more trouble at that point hehe) BUT if I set the % to cover more than 50% of the parent it scales the parent elements height to 200%.
Re read only link:
It seems you have to turn the preview off and on to se the hover effect. And the fade after hover is very sluggish but cannot find settings for it…


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Since there are no takers I guess it is not possible :frowning:

Try to use height for the card element to fix it.

1 Like

Do you mean something like this?

EXactly - Thank you!
For me, to understand how “images behave” is so far the most incomprehensible thing in Webflow. Took a long time just to find how to show the whole image in a square. And I still dont understand why what I found works :smiley:

1 Like

Your issue doesn’t have anything to do with webflow or images. You’re just lacking a bit of knowledge on how sizing works in the web.

When you make any of your paddings 100%, that means that you want the padding to be the size of the WIDTH of the parent element. If it was 50, it would be half the width.

That’s what the % value stands for when you apply it to either margin on padding. It’s % in relation to the width of the parent element. (ALWAYS THE WIDTH)

Absolutely -
In this case I had set the padding on the image container to 100% to get a square (like my original images - btw numbers on the images are pixels so I could see if they got cropped.) The problem here (again for me) is that the setting of the child element rules its parent. I thought the opposite was the case.

1 Like

To be honest this is really something that cannot be explained. It is just the way css specifications were written. No logical explanation that I know of exist :smiley:

2 Likes

Your parent takes the height of it’s content so of course child height affects it

Haha - I am learning - but slowly. Of course :smiley:

1 Like