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

Text-Indent Animation on Link Hover


joshroos

Question

Site URL: https://www.roosbrothers.com/

I would like to add a text-indent animation to my project links on my homepage. I have managed to figure out the css to achieve the text-indent animation, however, I would like them to stay in the indented position until the mouse is no longer hovering over the link. Right now they bounce back to their original position immediately.

Site is: https://www.roosbrothers.com/

 

 

 

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Thanks @creedon, works perfectly!

2 answers to this question

Recommended Posts

  • 0

I think you want to use transitions and transforms instead of animations.

Something like the following. This is just a start. You'd need to extend to meet your needs.

.portfolio-hover-item-title {

  transition : transform 1s linear;
  
  }

.portfolio-hover-item-title:hover {

  transform : translateX( 15px );
  
  }

This is for a v7.1 site.

You'll need to remove the animation code or comment it out. If you remove make a copy somewhere.

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
8 hours ago, creedon said:

I think you want to use transitions and transforms instead of animations.

Something like the following. This is just a start. You'd need to extend to meet your needs.



.portfolio-hover-item-title {

  transition : transform 1s linear;
  
  }

.portfolio-hover-item-title:hover {

  transform : translateX( 15px );
  
  }

This is for a v7.1 site.

You'll need to remove the animation code or comment it out. If you remove make a copy somewhere.

Let us know how it goes.

Thanks @creedon, works perfectly!

Edited by joshroos
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...