Hi there, I am new to CSS and trying to create a card with a blurred background. However, I have encountered an issue where the blurred image overflows on the border of the card.
I tried using -webkit-filter: blur(8px) in a separate div for the image but it didn't work quite as expected. Here's a snippet of my code:
.card {
padding-top: 66.6%;
border-radius: 0.8rem;
}
.bg-image {
background-image: radial-gradient(rgba(230, 230, 230, 0.3), rgba(39, 39, 72, 0.2)), url("images/prototype.png");
filter: blur(8px);
-webkit-filter: blur(8px);
position: absolute;
margin-top: -72.5%;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.toolsButton .card {
background: transparent;
cursor: pointer;
transition: all 250ms ease;
transform: scale(1);
border: solid 3px #272748;
}
.toolsButton:hover .card {
background: transparent;
transition: all 250ms ease;
transform: scale(1.05);
border: solid 3px #272748;
}
.toolsButton:active .card {
background: transparent;
transition: all 150ms ease;
transform: scale(1.1);
border: solid 3px #272748;
}
<div class="row justify-content-around">
<div class="col-9 col-xl-5 col-md-5 text-center toolsButton">
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="card">
<div class="card-body pt-3 row justify-content-center" style="height:fit-content;">
<div class="bg-image"></div>
<div class="col">
<span><?php echo $content; ?></span>
</div>
</div>
<input type="SUBMIT" name="app" value="<?php echo $content; ?>" style="opacity: 0">
</div>
</form>
</div>
If you have any suggestions or solutions, please let me know. Thanks in advance!