CODEWITHSUNDEEP
javascriptcssreactjs
mykoman
mykoman

Reputation: 1905

How to transform background Image on hover in React

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

Upvotes: 2

Views: 3608

Answers (3)

Magmagan
Magmagan

Reputation: 176

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

Upvotes: 3

Quentin Grisel
Quentin Grisel

Reputation: 4987

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.

Upvotes: 0

Taghi Khavari
Taghi Khavari

Reputation: 6582

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

Upvotes: 0

Related Questions