How to animate a span becoming visible? - html

Question

Using the following css i have some cards, that when i hover over them will show additional information using an inside div. However when the div becomes bigger because the extra div within the existing div will be shown, only the color change is animated, however the resizing of the card beacause of the extra info in it does not animate. Does anybody now a solution?
/* geschiedeniskaart */
.geschiedeniskaart
{
width:350px;
background-color: #E0F0FF;
box-shadow: 3px 3px 1px #888888;
margin-top:20px;
margin-left:5px;
transition: all 1s ease;
}
.geschiedeniskaartdatum
{
width:350px;
background-color: #001433;
box-shadow: 3px 3px 1px #888888;
margin-top:20px;
margin-left:5px;
}
.geschiedeniskaartdatum .tekst {
font-size:1.1 em;
margin-left:20px;
color: white;
line-height: 20px;
}
.geschiedeniskaart .tekst{
font-size:.9 em;
margin-left:20px;
color: #00004C;
line-height: 20px;
}
.geschiedeniskaart .visibletekst {
display:none;
transition: all 1s ease;
}
.geschiedeniskaart:hover {
background-color: white;
}
.geschiedeniskaart:hover .visibletekst {
display: block;
line-height : 30px;
}
The html looks something like this:
<div class="geschiedeniskaart">
<div class="row">
<div class="col-xs-12">
<span class="tekst">Title</span>
</div></div>
<div class="row visibletekst">
<div class="col-xs-6"><span class="tekst">I am visble when hovering over tittle</span></div><div class="col-xs-6"><span class="tekst">Date</span></div></div></div>

Answer 1

Do it all the way like this.
$(document).ready(function(){
var dd = $('dd');
var dt = $('dt');
dd.hide();
$('dl').on('mouseenter','dt',function(){
$(this).next().slideDown(400);
$('h1').fadeIn(1000);
dt.mouseleave(function(){
$(this).next().slideUp(400);
$('h1').fadeOut(1000);
});
/*can do the following as well:note the event delegationxx
$('dl').on('mouseenter','dt',function(){
$(this).next()
.show(400).
siblings('dd').
hide();
});*/
});
});
(function(){
$('<h1></h1>',{
text:"Hover for answers",
class: 'myclass'
}).prependTo('body');
})();
$('h1').click(function(){
$(this).hide('slow', function() {
$(this).insertAfter('p');
});
});
dl{padding:10px;text-align:center;background:silver;width:90%;margin:0 auto;border-radius:4px;}
dt{padding:5px;border:2px grey solid;font-size:2em;font-weight:bold;border-radius:5px;}
dd{font-size:1.5em;color:grey;}
h1 {font-size:1em;color:mediumpurple;}
.myclass{background:silver;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt>HOW are you bro</dt>
<dd>very nice, thank you<p></p></dd>
<dt>HOW are you bro</dt>
<dd>very nice, thank you</dd>
<dt>HOW are you bro</dt>
<dd>very nice, thank you</dd>
<dt>HOW are you bro</dt>
<dd>very nice, thank you</dd>
</dl>