how to give hover effect in styled components code example
Example 1: styled components hover
const Link = styled.a`
text-decoration: none;
color: inherit;
&:hover {
//your code
}
`;
Example 2: write hover animation for styled div
import styled, { css } from 'styled-components'
const AnimationContainer = styled.div`
transform: translate(0%);
transition: 0.3s ease-out;
${props => props.animated && css`
&:hover {
position: fixed;
transform: translate(0%, -30%);
transition: 0.3s ease-out;
}
`}
`
export default AnimationContainer