Hover Animation Help

Site URL: https://lavender-reed-n64j.squarespace.com/

Site Password: 2020

EDIT: Please see updated question below!

Hello,

I made a keyframe animation for my portfolio grid, however I can only get the animation to work on initial hover. The mz-out animation (which is the mz-in animation reversed) is not working. When the mouse leaves the hover the animation should fade back out. 

I believe the problem is related to the overlay inherent in the template preventing the animation from playing out. Is there a way to fix this?

Thanks!

.portfolio-grid-overlay .grid-item:hover .portfolio-title {
  color: red !important;
  animation: mz-in 1s ease-in-out;
}

/*
.portfolio-grid-overlay .grid-item .portfolio-title {
  color: blue !important;
  animation: mz-in 1s ease-in-out;
}
*/

@keyframes mz-in {
  0% {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes mz-out {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
}

Ok, I made it simpler!

I am trying to make the text move down after hover at the same speed as the beginning animation. I sped it up (.2s) because when I make it slower (1s) it doesn't show the animation at all. Because the overlay is preventing it 🙄

.portfolio-grid-overlay .grid-item .portfolio-title {
  transform: translate3d(0, 30px, 0);
  transition: .2s ease-in-out !important;
}

.portfolio-grid-overlay .grid-item:hover .portfolio-title {
  transform: translate3d(0, 0, 0);
  transition: 1s ease-in-out !important;
}

19 hours ago, creedon said:

Remove or comment out your previous CSS and add the following.

.no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text {

  -webkit-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  
  }

.portfolio-grid-overlay .grid-item .portfolio-title {

  -webkit-transform: translateY( 30px );
  -ms-transform: translateY( 30px );
  transform: translateY( 30px );
  
  -webkit-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  
  }

.portfolio-grid-overlay .grid-item:hover .portfolio-title {

  -webkit-transform: translateY( 0 );
  -ms-transform: translateY( 0 );
  transform: translateY( 0 );
  
  }

Let us know how it goes.

@creedon Thank you it works perfect!

I'm really curious though how you figured out the first part of the code. 

.no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text

I inspect elements with chrome and through trial and error (and looking at other similar examples on forums) figured out the other parts. So I understand those. 

But the .no-touch and .tweak...  I don't think I saw that when I inspected. Maybe I was looking in the wrong place. 

Anyways, maybe this is too big of a question. You don't have to answer.

Regardless, thank you again!

21 minutes ago, Marzon said:

But the .no-touch and .tweak...  I don't think I saw that when I inspected. Maybe I was looking in the wrong place.

It wasn't immediately apparent to me. I had to dig in a bit to get there. The key that got me started was I had to figure which rule was getting the text to pop in the first place. Once I found that rule then we could get a transition on the non hover state.

I didn't document my process so this is a bit general. I use Chrome as well.

17 minutes ago, creedon said:

It wasn't immediately apparent to me. I had to dig in a bit to get there. The key that got me started was I had to figure which rule was getting the text to pop in the first place. Once I found that rule then we could get a transition on the non hover state.

I didn't document my process so this is a bit general. I use Chrome as well.

It's still very helpful thanks! I'm having fun figuring these things out as well.