Issue
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 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>Solution
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>Answered By - Laaouatni Anas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.