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)?

Answer 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.