how to put an icon on an image with Php CSS?

July 20, 2022

I have images in a file with its name in the database. And I would like to display it in a responsive list. But I would like to add for each image an icon in a corner (or text below the frame) of the image to remove it if necessary. here is my html and php code

                <?php
                     $sqlimage = "SELECT * FROM images where `id_user` = '".$customer_id."'";                    
                     $result = mysqli_query($conn, $sqlimage);
                     foreach ($result as $imageShow) {
                ?>
                <div class="container">
                    <h1>Image Galerry</h1>
                    <div class="image-container">
                        <div class="image">
                            <img src="<?php echo 'Media/'.$imageShow['file_name'] ?>" alt="">
                            <div>
                                <i class='fa fa-trash' style='color: red'></i>
                            </div>
                        </div>
                        <div class="linkDelete"
                            style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
                            <a href="http://">Delete</a>
                        </div>

                        <?php
                        }
                         mysqli_close($conn);
                        ?>
                    </div>
                    <div class="popup-image">
                        <span>&times;</span> 
                        <img src="Media/3-20220714-68033.jpg" alt="">
                    </div>
                </div>

And here is my CSS3 code to display the images

*{
margin: 0;
padding: 0;
box-sizing: border-box;
 }

 .container{
  position: relative;
  min-height: 100vh;
  background-color: #191C24 !important;
  }

  .container h1{
   font-size: 40px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-weight: normal;
   padding: 15px;
   color: #333;
   text-align: center;
   text-transform: capitalize;
   }

        .container .image-container{
            display: flex;
            flex-wrap: wrap;
            gap:15px;
            justify-content: center;
            padding: 10px;
        }

        .container .image-container .image{
            height: 250px;
            width: 350px;
            border: 10px solid #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
            overflow: hidden;
            cursor: pointer;
            float: left;
        }
        .linkDelete{
            float: left;
            clear: left;
        }
        .container .image-container .image img{
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: .2s linear;
        }

        .container .image-container .image a{
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: .2s linear;
        }

        .container .image-container .image:hover img{
            transform: scale(1.1);
        }

        .container .popup-image{
            position: fixed;
            top: 50px;
            left: 0px;
            background: rgba(0, 0, 0, .9) ;
            height: 100%;
            width: 100%;
            z-index: 100%;
            display: none; 
        }
        .photo-name{
            position: absolute;
          width: 100%;
          bottom: 30px;
            text-align: center;
            background-color: cyan;
        }
        /* .image-container{
            position:relative;
        }

        .image-container a{
            position:absolute;
            bottom:0px;
            right:0px;
        } */

        .container .popup-image span{
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 60px;
            font-weight: bolder;
            color: #fff;
            cursor: pointer;
            z-index: 100;
        }

        .container .popup-image img{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid #333;
            border-radius: 5px;
            width: 75%;
            object-fit: cover;
        }

        @media (max-width:768px){
            .container .popup-image img{
                width: 95%;
            }
        }

I would like to have an image and on this image there is the icon which tells me the link to delete which is already prepared
I tried several ways but each time I find the icon in a position since the images with different dimensions.
If there was a possibility if not below the image a link to delete it and thank you in advance.

>Solution :

Set position: relative; on .image. Then set a class on the parent div for the icon. I called it .icon-wrapper. Set this parent to position: absolute; with top: 0;. Then you can use width and height: 100%; so it falls directly on top of your .image div.

Then you can use display: flex; with align-items: center; and justify-content: center; on .icon.wrapper to align the icon vertically and horizontally.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  min-height: 100vh;
  background-color: #191C24 !important;
}

.container h1 {
  font-size: 40px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: normal;
  padding: 15px;
  color: #333;
  text-align: center;
  text-transform: capitalize;
}

.container .image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  padding: 10px;
}

.container .image-container .image {
  height: 250px;
  width: 350px;
  border: 10px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  overflow: hidden;
  cursor: pointer;
  float: left;
}

.linkDelete {
  float: left;
  clear: left;
}

.container .image-container .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container .image-container .image a {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container .image-container .image:hover img {
  transform: scale(1.1);
}

.container .popup-image {
  position: fixed;
  top: 50px;
  left: 0px;
  background: rgba(0, 0, 0, .9);
  height: 100%;
  width: 100%;
  z-index: 100%;
  display: none;
}

.photo-name {
  position: absolute;
  width: 100%;
  bottom: 30px;
  text-align: center;
  background-color: cyan;
}


/* .image-container{
            position:relative;
        }

        .image-container a{
            position:absolute;
            bottom:0px;
            right:0px;
        } */

.container .popup-image span {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 60px;
  font-weight: bolder;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.container .popup-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #333;
  border-radius: 5px;
  width: 75%;
  object-fit: cover;
}

@media (max-width:768px) {
  .container .popup-image img {
    width: 95%;
  }
}

i {
  font-size: 3em;
  color: red;
}

.image {
  position: relative;
}

.icon-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>

<div class="container">
  <h1>Image Galerry</h1>
  <div class="image-container">
    <div class="image">
      <img src="https://dummyimage.com/300/000/fff" alt="">
      <div class="icon-wrapper">
       <i class="fa-solid fa-trash"></i>
      </div>
    </div>
    <div class="linkDelete" style="font-size: 13px;position:absolute;text-align:center; width:26px; padding-top:3px">
      <a href="http://">Delete</a>
    </div>
  </div>
  <div class="popup-image">
    <span>&times;</span>
    <img src="Media/3-20220714-68033.jpg" alt="">
  </div>
</div>