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

Question

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">
Delete
</div>
<?php
}
mysqli_close($conn);
?>
</div>
<div class="popup-image">
<span>×</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.

Answer 1

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">
Delete
</div>
</div>
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>
</div>

Answer 2

Thanks for adding the delete icon. But this one blocked me from displaying the full size image when I click inside the photo (the popup-image class action).
In the CSS
.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%;
}
}
And in the HTML
<div class="popup-image">
<span>×</span>
<img src="Media/3-20220714-68033.jpg" alt="">
</div>