I've been experimenting with using 'translate3d' and 'transition' on hover to animate a div into view.
While the animation works smoothly when hovering over the element, I'm having trouble getting it to transition back out of view upon exit. Currently, it simply disappears without any transition effect.
Despite trying various approaches, I haven't been able to find a solution. If anyone could help point out what mistake I might be making, I'd greatly appreciate it!
Here's a link to my codepen for reference:
https://codepen.io/anon/pen/KeMxoB
Below is the CSS code snippet:
a.box-item {
position: relative;
display: block;
overflow: hidden;
}
a.box-item img {
opacity: 1;
transition: opacity 0.35s;
}
a.box-item .text {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
margin: 0;
opacity: 0;
transition: transform 0.35s;
transform: translate3d(0,100%,0);
}
a.box-item .text h2 {
color: #FFF;
font-weight: 100;
opacity: 0;
transition: opacity 0.35s;
transition-delay: 0.05s;
}
a.box-item:hover {
background: #000;
}
a.box-item:hover img {
opacity: 0.8;
}
a.box-item:hover .text {
opacity: 1;
transform: translate3d(0,0,0);
}
a.box-item:hover .text h2 {
opacity: 1;
}