Display two buttons on image hover-CodePudding

I would like to have a hover effect on image that would display two buttons on mouse hover. I got it partially working. However currently my image has some black borders on sides, also image itself is somehow shrunk and buttons are not positioned in the centre. Does anybody have some idea how to fix these issues?

Here is how it looks like currently:

.container {
  background-color: #000;
  display: inline-block;
  font-size: 16px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
}

.container:before,
.container:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: #000000;
  border-left: 0px solid #fff;
  border-right: 0px solid #fff;
  content: '';
  opacity: 0.3;
  z-index: 1;
}

.container:before {
  -webkit-transform: skew(0deg) translateX(-155%);
  transform: skew(0deg) translateX(-155%);
}

.container:after {
  -webkit-transform: skew(0deg) translateX(155%);
  transform: skew(0deg) translateX(155%);
}

.container img {
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.container button {
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: 2;
  -webkit-transform: translate(-50%, -180%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
}

.container:hover button {
  opacity: 1;
}

.container:hover>img,
.container.hover>img {
  opacity: 0.5;
}

.container:hover:before,
.container.hover:before {
  -webkit-transform: skew(0deg) translateX(-50%);
  transform: skew(0deg) translateX(-50%);
}

.container:hover:after,
.container.hover:after {
  -webkit-transform: skew(0deg) translateX(50%);
  transform: skew(0deg) translateX(50%);
}

.container:hover figcaption,
.container.hover figcaption {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

    <div >
      <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" />
      <Row>
        <Col Span="12">
        <Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
        </Col>
        <Col Span="12">
        <Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
        </Col>
      </Row>
    </div>

CodePudding user response：

Actually, both buttons are overlapped. You need to set separate class for both button.

HTML:

<Button  OnClick="() => this.RemoveImage(context)" Danger tool>Delete</Button>
<Button  OnClick="() => this.OpenPreviewDialog(context)">View</Button>

CSS:

.container button1 {
    top: 60%;
    left: 50%;
    position: absolute;
    z-index: 2;
    -webkit-transform: translate(-50%, -180%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
.container button2 {
    top: 40%;
    left: 50%;
    position: absolute;
    z-index: 2;
    -webkit-transform: translate(-50%, -180%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

CodePudding user response：

body {
    height: 100vh;
    display: grid;
    place-items: center;
}

.content img {
    width: 50vw;
}

.content {
    display: grid;
    place-items: center;
    position: relative;
}

#button-div {
    position: absolute;
    display: none;
}

.content img:hover~#button-div {
    display: flex;
    gap: 0.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div >
        <img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
        <div id="button-div">
            <button>first button</button>
            <button>second button</button>
        </div>
    </div>
</body>

</html>