Hovering an article to make GatsbyImage scale

Question

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 ?

Answer 1

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