Issue
I experimented on this box for learning css, but it doesn't work. I tried several times to slow down the blur effect with transition while hovering over the box. Every time I hover over the box, the blur effect instantly changes its color. What is the missing part to slow down the blur effect?
body::-webkit-scrollbar {
display: none;
}
body {
margin: 0px auto;
background: black;
}
.box {
position: relative;
width: auto;
height: 150px;
display: flex;
background: black;
margin: 30px;
}
.box:before,
.box:after {
background: linear-gradient(0deg, orange, #1bd3ad99);
}
.box:before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
}
.box:after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -35px;
z-index: -2;
filter: blur(30px);
}
.box:hover:before {
background: linear-gradient(90deg, red, blue);
transition: 2s;
}
.box:hover:after {
background: linear-gradient(90deg, red, blue);
transition: 2s;
}<!DOCTYPE html>
<html lang="de">
<head>
<title>Title</title>
</head>
<body>
<div class="box"></div>
</body>
</html>Solution
Maybe you can transition opacity:
body::-webkit-scrollbar {
display: none;
}
body {
margin: 0px auto;
background: black;
}
.box {
position: relative;
width: auto;
height: 150px;
display: flex;
background: black;
margin: 30px;
}
.border:before,
.border:after,
.blur:before,
.blur:after {
content: '';
position: absolute;
transition: opacity 2s;
}
.border:before,
.border:after {
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
}
.blur:before,
.blur:after {
top: -10px;
left: -10px;
right: -10px;
bottom: -35px;
z-index: -2;
filter: blur(30px);
}
.border:before,
.blur:before {
background: linear-gradient(0deg, orange, #1bd3ad99);
}
.border:after,
.blur:after {
background: linear-gradient(90deg, red, blue);
}
.box:hover .border:before,
.box:not(:hover) .border:after {
opacity: 0;
}
.box:hover .blur:before,
.box:not(:hover) .blur:after {
opacity: 0;
}<div class="box">
<div class="border"></div>
<div class="blur"></div>
</div>Answered By - Jean Will
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.