Scale on hover effect for a 'next-link' which contains a social platform .svg file-CodePudding

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.

CodePudding user response：

This is the right class

<a className="transition duration-500 transform hover:scale-125">

'transform' class needs to be added, too.

CodePudding user response：

<Link href={`${footer?.instagram_link}`} >
              <a className="hover:scale-150">
                <InstagramIcon />
              </a>
            </Link>

CodePudding user response：

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>
)}