I want to scale the GatsbyImage
whenever I hover a specific content , I am using this code to fetch multiple articles , and I want to hover them independently .
{blog.data.blogs.map((ts)=>
(
<Blog to={`article/${ts.blog.document.uid}`}>
<GatsbyImage image={ts.blog.document.data.post_img.gatsbyImageData} alt='Blog' />
<BlogTitle>
{ts.blog.document.data.post_title.text}
</BlogTitle>
<BlogParagraph>
{ts.blog.document.data.post_paragraph.text}
</BlogParagraph>
How can I hover each article independently , and make the image scale if so ?
CodePudding user response:
It depends on what kind of styling are you applying but you can simply do:
<GatsbyImage image={ts.blog.document.data.post_img.gatsbyImageData} alt='Blog' className="some_fancy_classname" />
Then:
.some_fancy_classname:hover {
transition: transform .3s;
transform:scale(1.05);
}
Keep in mind that depending on your JSX/HTML structure, you may need to point to another element rather than .some_fancy_classname:hover
to scale the image, for example:
.some_fancy_classname:hover img {
transition: transform .3s;
transform:scale(1.05);
}