Kevin Powell - CommunityKP-C
Kevin Powell - Community3y ago
25 replies
Saika

Grid card with image, text under and transform scale

Hello, I am trying to create a div that will have an image, and under it there is a div with data about that image, the problem is that my grid-template-rows needs to have a max-content/min-content so that 1st row wont get bigger than image,

my second row should show text only after my animation is finished (and I would like it to have an actual size of the content (with text it just getting higher as text tries to fit div)


That card on unhover should scale down to something like 50px

I want to have a second screen (achieved with visibility:hidden) and when animation is done to have 1st screen (text visible) but when its scaling down text still gets my div to make whole element bigger

I can provide code as well if needed
image.png
image.png
Was this page helpful?