CSS Code
.hover-div {
position:absolute;
margin-top:-150px;
visibility:hidden;
transition:all 0.5s linear 0s;
}
.team_hover:hover + .hover-div {
margin-top:0px;
visibility:visible;
}
.hover-div:hover {
margin-top:0px;
visibility:visible;
}
.slide-hidden {
visibility:hidden !important;
transition:all 0.5s linear 0s;
}
When hovering over the yellow box, a slide will appear from the top containing team names. The goal is to have the slide retract when clicking on a team name instead of just hiding without any animation effects. Visit Plunker for Demo