I need help fixing the blur effect on my button. When I hover over it, the button becomes blurred even though I don't want that. I tried adjusting the z-index values but it didn't work.
There seems to be an error in the snippet where I want only the main card to blur, not the button.
Can someone suggest how to resolve the issue with the button blur?
I attempted using z-index and child elements in CSS without success.
I'm a beginner in CSS so any assistance is much appreciated.
To review and possibly edit, visit: JS Fiddle
CODE:
.main-card{
width: 326px;
height: 360px;
background-color: white;
border-radius: 15px;
display: inline-grid;
margin: 60px;
padding-bottom: 21px;
z-index: 1;
}
.main-card:hover{
webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
.rafflelink{
filter: blur(0px);
z-index: 2;
}
.main-card > .rafflelink{
opacity: 0;
height: 50px;
position: absolute;
width: 200px;
align-self: center;
justify-self: center;
z-index: 2;
}
.main-card:hover > .rafflelink{
opacity: 1;
filter: none;
}
.header-card{
font-family: 'Poppins', sans-serif;
text-align: center;
height: 20px;
background-color: white;
border-top-left-radius:15px ;
border-top-right-radius:15px ;
}
.img-bg-card{
background-color:#0779e4;
text-align: center;
}
.img{
height: 157px;
padding-top: 5px;
width: 95%;
}
.progress-bar{
height: 16px;
background-color: grey;
border:solid 2px #0779e4;
}
.price-bar{
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.ticket-bar{
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.date-bar{
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.price-left,.ticket-left,.date-left{
font-family: 'Poppins', sans-serif;
}
.price-right,.ticket-right,.date-right{
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
height: 100%;
background-color: #0695ff;
}<body>
<div class="main" style="text-align: -webkit-center; padding-bottom: 60px;">
<div class="main-card">
<button class="rafflelink" href="/urun/Random Random Random">Random Click</button>
<div class="header-card">Random Random Random</div>
<div class="img-bg-card">
<img class="img" src="">
</div>
<div class="progress-bar"></div>
<div class="price-bar">
<div class="price-left">Random Price:</div>
<div class="price-right">1</div>
</div>
<div class="ticket-bar">
<div class="ticket-left">Random Ticket:</div>
<div class="ticket-right">10000</div>
</div>
<div class="date-bar">
<div class="date-left">Random Date:</div>
<div class="date-right">05/06/2021</div>
</div>
</div>
</div>
</body>