我想在影像上有一個懸停效果，在滑鼠懸停時顯示兩個按鈕。我讓它部分作業。然而，目前我的影像兩側有一些黑色邊框，影像本身也以某種方式縮小了，按鈕沒有位于中心。有人知道如何解決這些問題嗎？
這是目前的樣子：
.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 class="container">
<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>uj5u.com熱心網友回復：
實際上，兩個按鈕是重疊的。您需要為兩個按鈕設定單獨的類。
HTML：
<Button class="button1" OnClick="() => this.RemoveImage(context)" Danger tool>Delete</Button>
<Button class="button2" 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;
}
uj5u.com熱心網友回復：
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 class="content">
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/393757.html