Show / hide - Hover - CSS - Animation

Question

Trying to add an animation to the show / hide made with CSS. But not sure if possible, maybe I should do this with JS instead?

The paragraph is shown when hovering the div, but this does not have a smooth animation like I would want it to. Was primary looking for it to drop down or something.

However, the basic works. Would be glad if you took a look and decided if it should be made with JS instead. And incase how.

HTML

<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Logo</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2 >Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>

CSS

.hover-to-show { 
    display: none;
    transition: all .2s ease-in-out;
}

.hover-to-show-link:hover .hover-to-show {
    display:block;
    transition: all .2s ease-in-out;
}

Answer 1

As @Paran0a said, display property cannot be animated, you can animate height or opacity for instead to make the transition works.

.hover-to-show { 
    opacity: 0;
    transition: all .2s ease-in-out;
}

.hover-to-show-link:hover .hover-to-show {
    opacity: 1;
    transition: all .2s ease-in-out;
}

<div class="hover-to-show-link">
    <a href="#">
        <h2>Logo</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <h2 >Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>

Answer 2

As mentioned before, Display cannot be animated. I would use a combination of visibility and opacity to get the wanted result:

.hover-to-show 
{ 
    visibility:hidden;
    opacity:0;
    transition:opacity 0.5s linear;
}

.hover-to-show-link:hover .hover-to-show 
{
    display:block;
    visibility:visible;
    opacity:1;
}

For a more thorough explanation