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;
}

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;
}

• javascript
• jquery
• html
• css

• 2 Display property cannot be animated. Use something like opacity if you want that smooth fade in / fade out. – Paran0a Commented May 20, 2016 at 7:12
• If you want to do this with Javascript, jQuery is your answer. It has some ready function for the Show/Hide functionality. – darshgohel Commented May 20, 2016 at 7:12

7 Answers 7

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>

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

Try this:

.hover-to-show { 
    visibility: hidden;
    height: 0;
    width: 0;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}
.hover-to-show-link:hover .hover-to-show {
    visibility: visible;
    height: auto;
    width: auto;
    opacity: 1;
}

You can animate using purely CSS· with Keyframes, although I recommend using jQuery and slideUp / slideDown

.hover-to-show span { 
    opacity: 0;
   position: absolute;
  line-height: 20px;
    transition: all .2s ease-in-out;
}

.hover-to-show {
  position: relative;
  display: block;
  height: 0;
  }

.hover-to-show-link:hover .hover-to-show span{
  -webkit-animation: show 2s forwards; /* Safari 4+ */
  -moz-animation:    show 2s forwards; /* Fx 5+ */
  -o-animation:      show 2s forwards; /* Opera 12+ */
  animation:         show 2s forwards; /* IE 10+, Fx 29+ */
}

.hover-to-show-link:hover .hover-to-show {
  -webkit-animation: grow 2s forwards; /* Safari 4+ */
  -moz-animation:    grow 2s forwards; /* Fx 5+ */
  -o-animation:      grow 2s forwards; /* Opera 12+ */
  animation:         grow 2s forwards; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes grow {
  0%   { height: 0; }
  100% { height: 20px; }
}
@-moz-keyframes grow {
  0%   { height: 0; }
  100% { height: 20px; }
}
@-o-keyframes grow {
  0%   { height: 0; }
  100% { height: 20px; }
}
@keyframes grow {
  0%   { height: 0; }
  100% { height: 20px; }
}

<div class="hover-to-show-link">
    <a href="#">
        <img src="http://dummyimage.com/100x4:3">
        <h2>Logo</h2>
        <p class="hover-to-show"><span>text</span></p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="http://dummyimage.com/100x4:3">
        <h2>Profilering</h2>
        <p class="hover-to-show"><span>text</span></p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="http://dummyimage.com/100x4:3">
        <h2 >Profilering</h2>
        <p class="hover-to-show"><span>text</span></p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="http://dummyimage.com/100x4:3">
        <h2>Profilering</h2>
        <p class="hover-to-show"><span>text</span></p>
    </a>
</div>

You can use Animate.css.

Usage

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

<p class="hover-to-show animated infinite bounce">text</p>

If you don't care much about browsers compatibility, you can use CSS3 transition property. Can I use CSS3 Transitions? But display property can't be animated, you can use opacity instead.

.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;
}

If you have to take care of old browsers, like IE, you can use jQuery instead.

$('.hover-to-show-link').mouseover(function() {
  this.find('.hover-to-show').fadeIn(200);
}).mouseleave(function() {
  this.find('.hover-to-show').fadeOut(200);
});

This is a great question! jQuery offers some great tools for this such as .slideDown() and .slideUp(), however this of course requires the use of jQuery.

If you would like to use CSS, I would suggest animating the max-height property; just make sure to keep the value it grows to greater than the content of your paragraphs.

 .hover-to-show {
   overflow: hidden;
   max-height: 0px;
   -o-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
 }
 .hover-to-show-link:hover .hover-to-show {
   max-height: 50px;
 }

<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>