Square image thumbnail with two buttons for preview and delete

Issue

I am not greatest UI designer yet. Trying to learn CSS. Can somebody guide me how to get something like this:

My current CSS:

.container {
  position: relative;
  width: 100px;
  height: 100px;
}

  .container:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0);
  }

  .container:hover::before {
    background-color: rgba(0,0,0,0.5);
  }

  .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .container button {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0;
  }

  .container:hover button {
    opacity: 1;
  }

HTML:

  <AntList Grid="new ListGridType { Gutter = 16, Column = 6 }" DataSource="this.ImgUrls">
    <ListItem>
      <div class="container">
        <img src="@context" alt="avatar" style="width: 100%" />
        <Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
        <Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
      </div>
    </ListItem>
  </AntList>

Currently it looks like this:

The main question is how to get thumbnails to be always square shape, image filling whole thumbnail space (no matter what size and resolution actual picture is), align two buttons next to each other.

Solution

On of the easiest solutions is to use a background image instead of an image. You'll have to adapt this process into your existing code but it will work.

.container {
  position: relative;
  width: 100px;
  height: 100px;
   background-image: url('https://i.stack.imgur.com/LoxY4.jpg');
  background-size: cover;
  background-position: center center;
}

  .container:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0);
  }

  .container:hover::before {
    background-color: rgba(0,0,0,0.5);
  }

  .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .container button {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0;
  }

  .container:hover button {
    opacity: 1;
  }

  <AntList Grid="new ListGridType { Gutter = 16, Column = 6 }" DataSource="this.ImgUrls">
    <ListItem>
      <div class="container">
        <Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
        <Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
      </div>
    </ListItem>
  </AntList>

Answered By - Authentic Science