Change background image on React component hover

Question

I want to change the background image of a project component when you hover over it. The img is in the array object. I already pull 'naam' and 'wat' from it, but the 'hover over and change the background to the img image' part I don't get.

What do I need to do to make this work? I can't wrap my head around it.

This is the code I'm using:

import React from 'react';
import './projectenoverzicht.scss';
import { Link } from 'react-router-dom';
import { ProjectenLijst } from './../../../data';
import { Grid } from '@material-ui/core';
import Sectiekopje from '../Sectiekopje/Sectiekopje';

const Projectenoverzicht = () => {
  const Project = ({ naam, wat }) => {

    const ProjectNaam = () => (
      <div className='project_kader_banner'>
        <p className='project-kader-banner__titel'>{naam}</p>
        <p className='project-kader-banner__wat'>{wat}</p>
      </div>
    );

    return (
      <div className='project-kader'>
        <ProjectNaam />
      </div>
    )
  }

  return (
    <>
      <Sectiekopje kop='Projecten' />
      <Grid container spacing={2} className='home-projecten-overzicht'>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#project1' className='link'>
            <Project naam={ProjectenLijst[0].naam} img={ProjectenLijst[0].img} wat={ProjectenLijst[0].wat} />
          </Link>
        </Grid>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#project2' className='link'>
            <Project naam={ProjectenLijst[1].naam} img={ProjectenLijst[1].img} wat={ProjectenLijst[1].wat} />
          </Link>
        </Grid>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#project3' className='link'>
            <Project naam={ProjectenLijst[2].naam} img={ProjectenLijst[2].img} wat={ProjectenLijst[2].wat} />
          </Link>
        </Grid>
        <Grid item xs={12} md={3}>
          <Link to='/projecten#music-player' className='link'>
            <Project naam={ProjectenLijst[3].naam} img={ProjectenLijst[3].img} wat={ProjectenLijst[3].wat} />
          </Link>
        </Grid>
      </Grid>
    </>
  )
}

export default Projectenoverzicht;

Answer 1

So as far as i get it you want to change your components background.I made a solution which works as follows:

• First make a state in functional component which will save your background image value

  const [BgImg, setBgImg] = useState("")
  

• Second step make a mouse enter and mouse leave events that will be called once someone hovers over your component.So that is when we will pass the backgrounds value.

     <div className='project-kader' 
         onMouseEnter={() => setBgImg("Back ground Image 1 Url")}
         onMouseLeave={()=>setBgImg("Back ground Image 2 Url")} 
   // Your background image value is save 
   // Now pass it to inline styles to change background
         style={{backgroundImage: "url(" + BgImg + ")",height:'500px'}}
         >
          <ProjectNaam />
       </div>
  

Answer 2

You can use css instead of JSX events like this answer

You could state your backgrounds in your class like so:

.my-image-class {
 background-image: var(--my-image);
 background-repeat: no-repeat;
 background-position: center;
 &:hover {
 background-image: var(--hover-image);
   transform: scale(1.5);
 }
}

And your JSX code should be like so:

<div
  key={index}
  className="my-image-class"
  style={{ '--my-image': `url(path)`; '--hover-image': `url(other-path)` }} 
>

Answer 3

I don't understand, for which component you want to change your background, but generally:

const imgs = ['imgOffHover.png', 'imgOnHover.png']

ImageDiv = () => {
   [bcgImg, setBcgImg] = useState(imgs[0])

return (
   <div 
      onMouseEnter={() => setBcgImg(imgs[1])}
      onMouseLeave={() => setBcgImg(imgs[0])}
  >
     <img src={bcgImg} alt="bcgImage" />
   </div>
}