0
116
VistasEscale el efecto de desplazamiento para un 'siguiente enlace' que contiene un archivo .svg de plataforma social
El código:
import InstagramIcon from './assets/IG.svg'; export const Footer = ({ footer }: FooterInterface) => { return ( ..... <Link href={`${footer?.instagram_link}`}> <a> <InstagramIcon /> </a> </Link> )} Esto es lo que quiero obtener: 
El ícono de Instagram debería escalar al pasar el mouse.
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Esta es la clase correcta
<a className="transition duration-500 transform hover:scale-125">También se debe agregar la clase 'transform'.
·
Juan Pablo Isaza
Denunciar
0
<Link href={`${footer?.instagram_link}`} > <a className="hover:scale-150"> <InstagramIcon /> </a> </Link>
·
Juan Pablo Isaza
Denunciar
0
Combinando https://tailwindcss.com/docs/hover-focus-and-other-states y https://tailwindcss.com/docs/scale querrás agregar hover:scale-150 como una clase a tu A-Tag (también puede usar otros tamaños de escala como scale-110 o scale-120 ):
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
Denunciar
Responde la pregunta