Entiendo que esta puede ser una consulta de novato, pero no soy muy bueno en CSS, por lo que agradecería algunos consejos sobre cómo lograr mi objetivo.

Estoy tratando de crear un álbum de tarjetas para NFT similar a la imagen a continuación:

En cambio, lo que obtengo con mi código es la imagen que se muestra sobre el título, la descripción, el precio y el botón. ¿Cómo se puede arreglar esto?

Archivo JSX:

 return ( <> <div className="img-grid"> {nfts.map((nft, i) => ( <div key={i} className="img-wrap"> <img src={nft.image} /> <div> <p>{nft.name}</p> <div>{nft.description}</div> </div> <div> <p>{nft.price}</p> <button onClick={() => buyNft(nft)}>buy</button> </div> </div> ))} </div> </> );

archivo CSS:

 .img-grid { /* width: 80%; */ margin: 1px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px; } .img-wrap { overflow: hidden; height: 0; padding: 50% 0; /* padding controls height, will always be perfectly square regardless of width */ position: relative; /* opacity: 0.8; */ } .img-wrap img { min-width: 100%; min-height: 100%; max-width: 150%; position: absolute; top: 0; left: 0; }

Lo que logré: