As I hover over the image, my goal is to make a gray box appear at the bottom and smoothly slide up. While it slides up, everything it covers should turn grayscale. When I move my mouse away from the image, I want the gray box to slide back down and remove the grayscale effect as it passes over the image.
I managed to achieve most of this using just CSS, but the issue I'm facing is figuring out how to reverse the animation when the mouse leaves the image.
Below is the code snippet I have been working on:
.wrapper {
position: relative;
img {
width: 600px;
height: 375px;
}
.hover {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 600px;
height: 100px;
animation-name: example2;
animation-duration: 1s;
display: none;
.gray-image {
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
background-repeat: no-repeat;
background-size: 600px 375px;
background-position: bottom 0 left 0;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
//position: absolute;
}
.text {
color: #FFF;
text-align: center;
width: 100%;
height: 100px;
background-color: rgba(89, 89, 89, 0.9);
}
}
&:hover {
.hover {
animation-name: example;
animation-duration: 1s;
height: 375px;
display: block;
}
}
}
@keyframes example {
from {
height: 100px;
}
to {
height: 375px;
}
}
@keyframes example2 {
from {
height: 375px;
}
to {
height: 100px;
}
}<div class="wrapper">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
<div class="hover">
<div class="gray-image" />
<div class="slide-box">
<div class="text">
<span>This is the title</span>
</div>
</div>
</div>
</div>How can I achieve the desired full effect?
For those who prefer it, here is a link to the jsfiddle version: https://jsfiddle.net/pt15ckeL/2/