Collapsible Animation - HTML/CSS/JS

Using javascript, I was able to create a feature where I click an image and more information appears. How do I animate/make the transition smoother compared to the sudden appearance of the paragraph? (I’m looking to use no JQuery.)

Need more information here,
How is the ‘more information’ section appearing?
Still to animate stuff you can use css.

Here’s example of CSS animation : CSS Animation on Enter Text
Open in Fiddle or Codepen to refer the code.

The “more info” section is just changing its display value whenever the user clicks the image.

What code have you tried so far? Do you have a link to your code (i.e. Codepen) we can view?