menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Using gatsby-background-image on hover

February 20, 2020 at 11:00am

Using gatsby-background-image on hover

February 20, 2020 at 11:00am
Can someone help me on how to use gatsby-background-image plugin only on hover state? Unfortunately I can't find any tutorials on how to do that, not even on their documentation.

February 20, 2020 at 11:01am
Here's an idea on how it should look like
Edited
  • reply
  • like
Have you considered using CSS? Are you trying to change the background to green image whenever one of those cards are hovered over? so go from a white background to a green background? If so, you can do this entirely with CSS and no images.
I know it's not your question, but CSS might be the best tool for this, for you.
like-fill
1
  • reply
  • like
I second that. Using CSS is better for performance, right?
like-fill
1
  • reply
  • like

February 21, 2020 at 3:34am
Yes, I have considered using CSS but I'm just looking a way if this would be possible with this plugin. Let me know if you or someone have some workarounds on how to do it. Thanks guys. Appreciate your feedback.
  • reply
  • like
It's actually quite straight forward, as I just tested with gbis example repo gbitest on its GbiStacked.js component:
import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import styled from 'styled-components'
import BackgroundImage from 'gatsby-background-image'
/**
* This component demonstrates how to use multiple stacked background images.
* @return {*}
* @constructor
*/
const GbiStacked = () => {
const { bubbles, firefox } = useStaticQuery(
graphql`
query {
bubbles: file(relativePath: { eq: "bubbles.png" }) {
childImageSharp {
fluid(quality: 90, maxWidth: 1280) {
...GatsbyImageSharpFluid_withWebp
}
}
}
firefox: file(relativePath: { eq: "firefox.png" }) {
childImageSharp {
fluid(quality: 90, maxWidth: 223) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`
)
// Multiple Background Array
const firefoxExampleFluidImageStack = [
firefox.childImageSharp.fluid,
bubbles.childImageSharp.fluid,
`linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))`,
]
return (
<StyledStackedBackgrounds
Tag="div"
fluid={firefoxExampleFluidImageStack}
id="imagestack"
role="img"
aria-label="A GBI background stack with the firefox example"
style={{
backgroundColor: 'white',
backgroundRepeat: 'no-repeat, no-repeat, no-repeat',
backgroundPosition: 'bottom right, left, right',
backgroundSize: '',
}}
/>
)
}
const StyledStackedBackgrounds = styled(BackgroundImage)`
width: 600px;
height: 400px;
&:before, &:after {
visibility: hidden;
}
&:hover {
&:before, &:after {
visibility: visible;
}
}
`
export default GbiStacked
like-fill
2
  • reply
  • like
You just have to target it's :before & :after pseudo-elements. Or did you think about a pure JS solution?
  • reply
  • like

February 24, 2020 at 3:55am
Wow, thanks so much. It works :)
like-fill
1
  • reply
  • like