Is it possible to use linear-gradient on top of a landing image in react?

Question

I am wishing to add a gradient to a landing page image.

I see examples in CSS using background (Example) but I am curious if it is possible to add it inline.

I appreciate any critiques, thank you!

import React from 'react';
import city from '../images/city-buildings.jpg'

function Home() {
  return (
    <div className='home'>
      <img
        src={city}
        alt="city buildings looking up"
        width="100%"
        height="100%"
        backgroundImage="linear-gradient(to right, #4880EC, #019CAD)".  <------------- this line
      />
    </div>
  );
}

export default Home;

Answer 1

To apply a linear gradient over an image this code worked for me:

Component

import React, { Component } from 'react';
import city from '../images/city-buildings.jpg'

const style = {
  width: '100%',
  height: '100%',
  opacity: '0.8'
}

export default class MyComponent extends Component {
  render() {
    return (
      <div className="home">
        <img
          src={city}
          style={style}
          alt="city buildings looking up"
        />
      </div>
    )
  }
}

Component.css

.home {
  background: linear-gradient(#e66465, #9198e5);
}