Transition on leaving mouse - html

Question

I'm trying to make some transition.
At the moment my block has 3 parts :
base block
Hover image (coming from top)
Hover title (coming from bot)
On mouse hover, there also is a transition on the background-color that will change.
Everything works when mouse arrives, and the goal is to make the same inverse animation when the cursor leaves.
#studio {
margin-top:50px;
margin-left:50x;
}
#studio #portfolie {
position: relative;
z-index: 10;
}
#studio #portfolie .content-porfolio {
text-align: center;
width: 800px;
margin: 0 auto 140px;
}
#studio #portfolie .project-title--hover {
bottom: -19px;
transition: bottom .7s ease;
}
#studio #portfolie .project-logo--hover {
margin-top: -100px;
transition: margin-top 0.7s ease;
}
#studio #portfolie .md-trigger:hover .project-title--hover {
display: block !important;
bottom: 25px;
}
#studio #portfolie .md-trigger:hover .project-logo--hover {
display: block !important;
width: 70%;
margin-left: 15%;
height: 100px;
background-repeat: no-repeat;
margin-top: calc((25%-attr(height))/2);
background-size: contain;
background-position: center;
position: absolute;
overflow: hidden;
}
#studio #portfolie .project-logo--base {
height: 100%;
width: 100%;
background-repeat: repeat;
position: absolute;
overflow: hidden;
}
#studio #portfolie .hover-container {
transition: background-color 0.5s ease;
background-color: transparent;
}
#studio #portfolie .md-trigger:hover .hover-container {
background-color: #F1CE34;
height: 100%;
width: 100%;
position: absolute;
}
#studio #portfolie .content-play {
margin-bottom: 15px;
position: relative;
z-index: 2;
}
#studio #portfolie .content-play .slide {
display: none;
}
#studio #portfolie .content-play > * {
width: calc(100% * 1 / 3 - 40px);
}
#studio #portfolie .content-play .play {
height: 200px;
cursor: pointer;
position: relative;
color: #FFF;
text-transform: uppercase;
margin-bottom: 40px;
}
#studio #portfolie .content-play .play span {
font-size: 0.8em;
position: absolute;
font-family: 'ProximaNovaA-Black';
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 100%;
}
<section id="studio">
<div id="portfolie">
<ul class="content-play clearfix grid-3">
<li data-modal="modal-video-1" class="first play md-trigger slide" id="first-play" style="display: list-item;">
<div class="project-logo--base" style="background-image: url(http://storage.tvanouvelles.ca/v1/dynamic_resize/sws_path/tvanouvelles_prod/bc7caa6d-8748-495c-8522-a7fc17513ce7_ORIGINAL.jpg?quality=80&size=800x&version=0)">
<div class="hover-container">
<div class="project-logo--hover" style="background-image: url(http://www.esoterisme-exp.com/File_images/2012/1205/Carre-bleu.png)"></div>
<span class="project-title--hover">Tennis festival</span>
</div>
</div>
</li>
</ul>
</div>
</section>
here is the same on CodePen because it looks easier to modify

Answer 1

You could use :not(:hover) pseudo class.
If your problem is that the blue square is not going back up then try it like this:
#studio #portfolie .project-logo--hover {
top: -100px;
transition: top .7s ease;
width: 70%;
margin-left: 15%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
}
#studio #portfolie .md-trigger:hover .project-title--hover {
display: block !important;
bottom: 25px;
}
#studio #portfolie .md-trigger:hover .project-logo--hover {
display: block !important;
top: calc((25%-attr(height))/2);
}
#studio #portfolie .hover-container {
transition: background 0.7s linear;
background-color: #FDF200;
height: 100%;
width: 100%;
position: absolute;
}
#studio #portfolie .md-trigger:hover .hover-container {
background-color: #F1CE34;
}

Answer 2

Have a look at the "Sweep to Top" background-transition here and here. I think it could suit your needs.