justice-league | visual analytics of salary table

I am trying to have a form on my react site that someone can fill out and it would add a new item in my list. I am trying to do this using "react-hook-form" which seems easy to setup and work with. It does capture the information when I console.log and check. I am trying to now add that to my array.

App.js (In this file I have the array withe objects along with my component I have passed in the props.

My code for a Video Gallery is below and almost everything is working fine, but you can see in the image there is a small "gap" of black color before the image is hovered, is there anyway to remove it or replace the color?

I want to "keep" the transition and the background color.

Here is the code pen: https://codepen.io/wavyblues/pen/poyBbeL

This is what the background image looks like on the laptop

This is what the background image looks like on mobile enter image description here

As you can see the background is not correctly aligned, I want to see the exact same background on both.

Below is the cs code that I used and it doesn't help in resizing the image so that I see the same background image:

body { background-image: url('https://www.hdwallpapersbook.com/wp-content/uploads/2017/05/Justice-League-Batman-Wonder-Woman-Aquaman.jpg');