Issue
I've spent a day figuring out how to make an animation after hovering over the link by using Tailwind-CSS. Here is the animation I want mine link looks like the video. Sample from Youtube
I have tried using :after
, but it didn't work out.
Here is my link component => https://codepen.io/qqharry21/pen/xxPwqjQ
I Hope can learn how to fix it, and make it works like the video by Tailwind-CSS, thanks!
Solution
You can you transition for that:
.link-underline {
border-bottom-width: 0;
background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
background-size: 0 3px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .5s ease-in-out;
}
.link-underline-black {
background-image: linear-gradient(transparent, transparent), linear-gradient(#F2C, #F2C)
}
.link-underline:hover {
background-size: 100% 3px;
background-position: 0 100%
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<a href="#" class="font-display max-w-sm text-2xl font-bold leading-tight">
<span class="link link-underline link-underline-black text-black"> Link Hover Effect </span>
</a>
</div>
</div>
Answered By - Max Pattern
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.