How to apply icon over an image when images are fetching from an api

Question

I have an api that fetches the images of dogs and I want to apply heart icon (like favourite feature) over it . When clicked , that image should also get display on the favourites section. I am not able to find to how to apply heart icon over the images.

<div className="container3">
      {
        imageUrls && imageUrls.map(record => {
          return (
            <>
            < div className="col-sm" >
              <img src={record} alt='i'></img>
              <FontAwesomeIcon icon={faHeart} className='heart-icon' style={{color: "#ff0000",}} />
            </div>
            </>
          )

        })
      }
    </div>

Can anybody help me with the css

I am getting heart icon above the images and also not in same alignment. I want the heart icon to be at the bottom right of the image.

Answer 1

You can achieve this by setting a position: absolute on the icon. Make sure the img is wrapped by a div, set the width and height you want on the div and then set the img to width and height of 100%. Make sure the icon is within the same div and set the position on the icon to absolute e.g position: absolute.