Quiero cambiar la etiqueta html a nex/js Image, pero el efecto de opacidad al pasar el mouse ya no funciona.

Código inicial:

 <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 }} />

con siguiente/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" />

Con Imagen, las imágenes siempre están iluminadas, no solo al pasar el mouse por encima.