How can I make a paragraph visible only after a transition ?

Question

I made a little square (a div) that grows (with a transition:width). there is a paragraph in it and I want that paragraph to be visible only after the user has put the mouse on it an the little square has grown up.
How can I do that ??
Please help

Answer 1

to make paragraph visible when mouse over on div element:

p{
opacity:0;
}
div:hover p{
opacity:1;
transform:0.2s;
}

instead opacity,u can use other properties,such as visibillity,font size,etc

Answer 2

Thank you so much

Answer 3

No prob. Feel free to checkout my codes:)