This question has been edited and simplified again. I created a set of buttons when you hover over one of those buttons, a descriptive paragraph appears underneath. It works for the most part but I am trying to get the paragraph to slide up and fade in when it appears on hover, and then on mouse out, slide back down and fade out. I can't seem to get the fade part of the animation to work. That is what I am having trouble with mainly.
Also, could the Jquery code be simplified? If not that is fine. Thank you in advance.
$('#web').hover(function(){
$('#web-blurp').toggleClass('show-blurp');
});
$('#design').hover(function(){
$('#design-blurp').toggleClass('show-blurp');
});
$('#film').hover(function(){
$('#film-blurp').toggleClass('show-blurp');
});
$('#marketing').hover(function(){
$('#marketing-blurp').toggleClass('show-blurp');
});body{
background-color: black;
}
.hero-content {
text-align: center;
margin: 20% auto;
}
.hero-content li {
display: inline-block;
transition: .8s ease;
}
.hero-content a {
display: block;
width: 200px;
background-color: #fff;
margin-right: 20px;
text-align: center;
border-radius: 5px;
}
.hero-content a {
text-decoration: none;
}
.hero-content span {
display: inline-block;
margin: 40% 0;
font-family: Sans-Serif;
text-transform: uppercase;
font-size: 1.2em;
font-weight: 400;
color: blue;
}
.feat-blurp {
width: 44%;
margin: -300px auto 0;
color: #fff;
font-family: Sans-Serif;
font-weight: lighter;
font-size: 1.3em;
}
.hide-blurp {
display: none;
opacity: 0;
transition: opacity .5s linear;
}
.show-blurp {
display: block;
opacity: 1;
transition: opacity .5s linear;
animation-name: blurp-up;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes blurp-up {
from{ transform: translateY(50px)}
to{ transform: translateY(0)}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="hero-content"><li><a href="#" class="feat-btn box-one" id="web"><span>button 1</span></a></li><li><a href="#" class="feat-btn box-two" id="design"><span>button 2</span></a></li><li><a href="#" class="feat-btn box-three" id="film"><span>button 3</span> </a></li><li><a href="#" class="feat-btn box-four" id="marketing"><span>button 4</span></a></li></ul><div class="feat-blurp"><p id="web-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p><p id="design-blurp" class="hide-blurp">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p><p id="film-blurp" class="hide-blurp">reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p id="marketing-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p></div>
