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
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
I can provide code as well if needed
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 biggerI can provide code as well if needed


