Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hover Animation Help


Marzon
Go to solution Solved by creedon,

Question

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);
  }
}

 

Edited by Marzon
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-transit

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 r

5 answers to this question

Recommended Posts

  • 1

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 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;
}

 

Link to post
  • 0
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!

Link to post
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...