Question 243442 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    I recomend using absolute positioning to achive this. Put your icon element as a child of the image element, then give the child this css:

    position: absolute;
top: 0;
left: 0;
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search