[Resolved] hover link animation css

[Halil]

hi,
For blog posts only, I’ve added below code to make a hover effect for links. It works fine, but I want a little bit different animation, hover link color should start filling up the link from bottom to top. Could you pls help me with that? I’ve added a sample link

body.single-post .entry-content a {
    padding: 0em .2em;
		transition: all 0.3s;
}

body.single-post .entry-content a:hover{
  	background-color: #444fe520;
	  color:#444fe5;
}

[Ying]

Hi Halil,

Try this CSS:

.entry-content a {
    background-repeat: no-repeat;
    background-size: 100% 0;
    background-position: 0 111%;
    transition: all  0.3s ease;
}
.entry-content a:hover{
    color:#444fe5;
    background-image: linear-gradient(to bottom, #444fe520 0%, #444fe520 100%);
    background-size: 100% 100%;
}

[Halil]

Perfect, huge thanks Ying : )

[Ying]

No Problem, glad to help 🙂

[Author]

Posts