0
117
ViewsScale on hover effect for a 'next-link' which contains a social platform .svg file
The code:
import InstagramIcon from './assets/IG.svg';
export const Footer = ({ footer }: FooterInterface) => {
return (
.....
<Link href={`${footer?.instagram_link}`}>
<a>
<InstagramIcon />
</a>
</Link>
)}
This is what I want to obtain:
The Instagram icon should scale up on hover.
·
Juan Pablo Isaza
3 answers
Answer question0
This is the right class
<a className="transition duration-500 transform hover:scale-125">
'transform' class needs to be added, too.
·
Juan Pablo Isaza
Report
0
<Link href={`${footer?.instagram_link}`} >
<a className="hover:scale-150">
<InstagramIcon />
</a>
</Link>
·
Juan Pablo Isaza
Report
0
Combining https://tailwindcss.com/docs/hover-focus-and-other-states and https://tailwindcss.com/docs/scale you would want to add hover:scale-150 as a class to your A-Tag (you can use other scale sizes like scale-110 or scale-120 too):
import InstagramIcon from './assets/IG.svg';
export const Footer = ({ footer }: FooterInterface) => {
return (
.....
<Link href={`${footer?.instagram_link}`}>
<a className="hover:scale-150">
<InstagramIcon />
</a>
</Link>
)}
·
Juan Pablo Isaza
Report
Answer question