Marzon Posted October 15, 2020 Posted October 15, 2020 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); } }
Marzon Posted October 15, 2020 Author Posted October 15, 2020 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; }
creedon Posted October 15, 2020 Posted October 15, 2020 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.
Marzon Posted October 16, 2020 Author Posted October 16, 2020 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!
creedon Posted October 16, 2020 Posted October 16, 2020 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.
Marzon Posted October 16, 2020 Author Posted October 16, 2020 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.