z-index div in front after image inside div

Question

I have a div, with an img and another div inside, I want the image to be behing the second div, how would I do that?
( i have multiple of these)
Don't know how to make this, tried multiple things...

#pointTerminal {
    padding: 6px;
    position: absolute;
    left: 359px;
    top: 607px;
    transform: translate(-50%, -50%);
}
#pointParking {
    padding: 6px;
    position: absolute;
    z-index: 15;
    left: 356px;
    top: 586px;
    transform: translate(-50%, -50%);
}

#pointIcon {
    top: 0%;
    position: absolute;
    max-width: 100%;
    height: 100%;
    color: red;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition:  .3s; /* Animation */
    z-index: 2;
}

#cardpoint {
  position: absolute;
    flex-direction: column;
    max-width: 200px;
    min-height: 30px;
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: #2a2a2a;
   opacity: 0;
  transition: opacity 0.3s ease, height 0.3s ease;
  pointer-events: none;
  z-index: 66;
}

<div id="pointTerminal">
    <img id="pointIcon" src="https://picsum.photos/500">
        <div id="cardpoint" >
            <p id="cardTitle">Terminal</p>
        </div>
</div>

<div id="pointParking">
    <img id="pointIcon" src="https://picsum.photos/400">
        <div id="cardpoint" >
            <p id="cardTitle">Legion Square</p>
        </div>
</div>

I want the "cardpoint" div to be in front of "pointIcon" img, it need to be in that order in the html

Answer 1

AFAIK, you can't place a div (or any other tag) inside an img tag. If your expected result is something like this: result

You can try the following:

.container {
  /* this is the div that contains the image and the inner div */
  position: relative;
  /* adjust size to your needs, both are mandatory to be displayed */
  height: 200px;
  width: 200px;
  /* if you use a local file, instead of a link use the image address, based on your project; keep the "url()"; for example: url("root-folder/image-name.file-extension") */
  background-image: url("https://images.unsplash.com/photo-1670272502972-cccb4b96c4f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.inner-div {
  /* div on top of the image */
  position: absolute;
  height: 100px;
  width: 100px;
  /* you can change the color of the div to whatever suits you */
  background-color: red;
  /* this centers the div inside the parent; change it based on what you want to achieve */
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
    <div class="inner-div"></div>
</div>

<!-- place it in the body or wherever you need it --!>

This can be applied to as many divs as you like. To stylish them all at the same time I advise you to use classes instead of IDs.

Answer 2

you could try this: pointTerminal, pointParking set position relative, and pointIcon you should set position absolute

<div class="container"
    <div id="pointTerminal" />
    <img id="pointIcon" src="https://picsum.photos/500">
        <div id="cardpoint" >
            <p id="cardTitle">Terminal</p>
        </div>
</div>

<div class="container">
<div id="pointParking" />
    <img id="pointIcon" src="https://picsum.photos/400">
        <div id="cardpoint" >
            <p id="cardTitle">Legion Square</p>
        </div>
</div>

Answer 3

I hope I am understanding your issue properly. Having read through your code I will say two things. The code you gave appears incomplete, you have set opacity to 0 on your cardpoint id and it also has a transition property so I am assuming you have some event such as hover attached to the cardpoint div.

Also, it appears you are using "id" for everything when in reality you should be using "class". "id" should be used for unique elements and I will provide an example of how I might refactor your code and place the img and div in the proper order as per your request.

Here is a post that talks about id vs class in more depth What is the difference between id and class in CSS, and when should I use them?

<div id="pointTerminal">
    <img class="pointIcon" src="https://cdn.mos.cms.futurecdn.net/snbrHBRigvvzjxNGuUtcck.jpg">
    <div id="cardpoint1" class="cardpoint" >
      <p class="cardTitle">Terminal</p>
    </div>
</div>
<div id="pointParking">
    <img class="pointIcon" src="https://bpb-us-e2.wpmucdn.com/newsevents.illinoisstate.edu/dist/c/2/files/2016/02/Back_side_of_the_Moon_AS16-3021.jpg">
    <div id="cardpoint2" class="cardpoint" >
      <p class="cardTitle">Legion Square</p>
    </div>
</div>

body {
  background: #001c34;
}

#pointTerminal {
    padding: 6px;
    position: absolute;
    top: 20%;
    left: 60%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pointParking {
    padding: 6px;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pointIcon {
    position: absolute;
    mix-blend-mode: screen;
    max-width: 100%;
    z-index: -1;
}

.cardpoint {
    border-radius: 10px;
    padding: 0 10px;
    opacity: 0;
    transition: opacity 0.3s ease, height 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

#cardpoint1 {
  background: #ff83839e;
}

#cardpoint2 {
  background: #eddb5b9e;
}

#pointTerminal:hover .cardpoint,
#pointParking:hover .cardpoint {
  opacity: 1;
}

In my example I have changed all the ids to classes and created and id for cardpoint1 and cardpoint2. I left the 'opacity: 0' on .cardpoint and applied a hover effect to #pointTerminal that when hovered it will change the .cardpoint opacity to 1 with your desired transition values. I hope this helps and if you have any questions please let me know.