Jump to content

Hover Animation Help

Recommended Posts

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

 

Link to comment
  • Replies 5
  • Views 531
  • Created
  • Last Reply

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 comment

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.