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;

Does this answer your question? [react js onMouseEnter change image](https://stackoverflow.com/questions/43338423/react-js-onmouseenter-change-image) — Priya jain, Sep 28 '20 at 12:18
Hmm my situation is somewhat different I think. I currently have a CSS class setting the background color of the project. So when I hover, I want to override this with an image, and return to the background color after the mouse leaves the project div. — Paul, Sep 28 '20 at 12:50

score 4 · Answer 1 · answered Sep 28 '20 at 12:37

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

score 1 · Answer 2 · answered Sep 29 '20 at 03:37

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>

Thanks! This works :-) But the initial background is a background color. So the inline style has to be different, since this one assumes there's a background image when the component loads. — Paul, Oct 01 '20 at 12:34

score 0 · Answer 3 · answered Sep 28 '20 at 12:45

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

Change background image on React component hover

3 Answers3