How to transform background Image on hover in React

Question

My intention is to scale my background image when user's mouse enters by 1.5 but my attempts proves abortive. Here is my code:

import React from 'react';
import Slider from './index';
import horizontalCss from './css/horizontal.scss';
import content from './content';
import SourceView from './SourceView';
import './css/styles.scss';

function Autoplay() {
 return (
  <div>
   
   <Slider classNames={horizontalCss} autoplay={3000}>
    {content.map((item, index) => (
     <div
      key={index}

      style={{ background: `url('${item.image}') no-repeat center center`, 
                           '&:hover': {
       background: 'white',
       transform: 'scale(1.5)',
       }, }}
     >
      <div className="center">
       <div className="textWrapper">
       <h2>{item.title}</h2>
       </div>
      </div>
     </div>
    ))}
   </Slider>
   
  </div>
 );
}

export default Autoplay;

What adjustment do I have to do to make this work

This is not really a React issue, CSS inline styles does not have the option to add pseudo-class effects. You need to put your effect in a class, and set the `className` of your react component. — Keith, May 20 '20 at 19:27

score 3 · Accepted Answer · answered May 20 '20 at 19:58

As people have mentioned earlier, this is not an issue with React; rather, the style property in HTML does not have support for CSS selector like :hover. Also do please note that &:hover is not valid CSS, but is valid SCSS that is being preprocessed by your webpacker of choice.

However, the hover-specific styles of your <div> do not react to anything, so they could be put in a class

.my-image-class {
  background-repeat: no-repeat;
  background-position: center;

  &:hover {
    background: white;
    transform: scale(1.5);
  }
}

And then you could toggle the background-image when not hovering with

<div
  key={index}
  className="my-image-class"
  style={{ background: `url('${item.image}') }} 
>

Bonus: you might think a step further & want to also have you hover image reactive, and this strategy would fall flat. Kalabasa has a great answer that uses dynamic CSS variables (MDN docs) for reactive class properties.

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 then change the variables dynamically

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

score 0 · Answer 2 · answered May 20 '20 at 19:28

0

Inline Style doesn't support pseudo selectors you need to move your hover style css to your styles.scss and try to use a className or id instead

answered May 20 '20 at 19:28

Taghi Khavari

6,272
3
15
32

score 0 · Answer 3 · answered May 20 '20 at 19:43

Are you looking for something like this ? Repro on stackblitz It scale the block when you hover it. Here is the code in case Stackblitz does not work:

css :

html, body, #app {
  margin: 0;
  padding: 0;
  position: relative;
}
.app-component{
  position: absolute;
  width: 300px;
  height: 200px;
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  border: 1px solid black;
  top:100px;
  left:100px;
}

.app-component:hover{
  transform: scale(1.5);
  transition:transform 1s linear;
}

app:

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

const App = () => {
    return (
      <div className="app-component">
      </div>
    );
}

render(<App />, document.getElementById('root'));

You need to do it in you css, avoid using inline style when you can.

How to transform background Image on hover in React

3 Answers3