I am currently working on implementing a transition effect.
My block consists of 3 main parts:
- Base block
- Hover image (coming from the top)
- Hover title (coming from the bottom)
When hovering the mouse, there is also a background-color transition that occurs.
Everything functions correctly when the cursor hovers over, and the objective is to create a similar reverse animation when the cursor moves away.
#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>