Displaying close (X) button in corner of image in css grid

Question

I have images of different sizes and x/y ratios in a responsive CSS grid. I need a ✖️ button in the top-right corner of each image. So in each grid cell I put a form, and inside the form - a button and an image:

<form action="/destroyImage" method="POST">
  <button type="submit" class="close">
    <span>&times;</span>
  </button>
  <img src="/pub/myimage123.jpg"/>
</form>

The questions:

1. How can I place the center of the button on the corner of the image?
2. How can I get a better looking ✖️ button (I use Bootstrap 4)?

Solution 1

To get the 'X' in the top right hand corner you could do:

.AClass{
    right:0px;
    position: absolute;
}

<form action="/destroyImage" method="POST">
    <div style="position:relative;">
        <button type="submit" class="close AClass">
           <span>&times;</span>
        </button>
        <img src="/pub/myimage123.jpg"/>
    </div>
</form>

To get a better cross I would suggest using Font Awesome or some variant of that.

Solution 2

You can adjust right by your perspective

button{
  position: absolute;
  z-index: 1;
  right: 0;
}
img {
  position: relative;
  width: 100%;
}

<form action="/destroyImage" method="POST">
  <div class="1st">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
  <div class="2nd">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
  <div class="3rd">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
</form>

FOR GRID

you can use position-absolute and position-relative BS4 class for image and button

button{
  position: absolute;
  z-index: 1;
  right: 20px;
}

img {
  position: relative;
}

button span {
  color: red; // for testing purpose
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<form action="/destroyImage" method="POST">
  <div class="row">
    <div class="col-4">
      <div class="1st">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
    <div class="col-4">
      <div class="2nd">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
    <div class="col-4">
      <div class="3rd">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
  </div>
</form>

Comments

[Evgeny Benediktov]

This moves images outside of the grid cells

[Evgeny Benediktov]

It works, but row-wise: all X buttons of each row are on the right-most image/cell of each row

[Nisharg Shah]

what are you say, i dont understand

[Evgeny Benediktov]

I have 3 images on each row of the grid - when I use css as you suggest - all three X buttons are in the same location (one over other) - in the corner of the rightmost image of the row

[Evgeny Benediktov]

Thank you very much - by the way, for some reason I see in your first snippet the button looks like a rectangular X button, and in the second snippet - it's just "x". Do you know what is the reason for that?

[Evgeny Benediktov]

Since I used JamesS's solution. I upvoted you answer, it was very helpful too, thanks