I want to change the html tag to nex/js Image, but the opacity effect on hover doesn't work anymore.

Initial code:

 <div
          className="absolute bg-cover bg-no-repeat h-full w-full group-hover:opacity-0"
          style={{
            height: mediaHeight,
            backgroundImage: `linear-gradient(rgba(15, 41, 55, 0.65), rgba(15, 41, 55, 0.65))`,
          }}
        />
        <img
          src={getAbsUrl(imageUrl)}
          alt={title}
          className="w-full object-cover"
          style={{ height: mediaHeight }}
        />

With next/js

<div
          className="absolute bg-cover bg-no-repeat h-full w-full group-hover:opacity-0"
          style={{
            height: mediaHeight,
            backgroundImage: `linear-gradient(rgba(15, 41, 55, 0.65), rgba(15, 41, 55, 0.65))`,
          }}
        />
        <Image
          src={getAbsUrl(imageUrl)}
          alt={title}
          className="w-full object-cover bg-opacity-25"
          layout="fill"
        />

With Image the pictures are always lighted not just only on hover