Can anyone help me prevent a blur effect on the "text-block" child element when the mouse hovers over the card element? I want the card element to have a complete blur effect while also displaying the text block on top of it.
I've tried several options but none seem to work. Thank you in advance for any assistance.
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<div class="container my-2">
<a href="/Zanzibar.html"><img src="./images/mnemba_view.JPG" class="w-100 w-sm-120 preview"/></a>
<div class="text-block">Click to read more</div>
</div> `
.card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.preview {
position: relative;
}
.text-block {
position: absolute;
opacity: 0;
z-index: 1;
bottom: 0;
top: 50%;
left: 50%;
block-size: 50px;
inline-size: 200px;
padding: 10px 10px;
background-color: rgb(189, 113, 20);
color: white;
border-radius: 10px;
}
.card:hover .text-block{
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.card:not(hover) .text-block {
transition: 0.4s;
}
.card:hover {
filter: blur(2px);
cursor: pointer;
}