How to blur an image without blurring the text?

user_14885612 0
Viewed 368

I want to make the image blur and then show text. I've tried many options but either completely blurred or behaved strangely.

My codes works a little weird :) so like a give signal.(I'm using Bootstrap)

.card-blur{
   z-index: 1;
}

.card-blur:hover {
  /* filter: blur(5px); */
  z-index: -1;
  filter: blur(5px) grayscale(1);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

bootstrap-5 css html
2 Answers

I think you mean blur the image and show the text on hover.

What you need to do is capture the hover on the parent and affect the children.

This is key for the blur:

.card:hover > .card-blur { ... }

To show the text:

.card:hover > .card-img-overlay { ... }

Please check the snippet below

/* Hide the overlay */
.card-img-overlay {
   z-index: -1;
}

/* Hover on card, blur the image */
.card:hover > .card-blur{
    filter: blur(5px) grayscale(1);
}

/* Hover on card, show the text by increasing z-index */
.card:hover > .card-img-overlay {
  z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="card bg-dark text-white">
  <div class="card-blur">
  <img src="https://bi.im-g.pl/im/b5/34/11/z18038965V,Krzysztof-Kieslowski-po-pokazie--Amatora---1979-r-.jpg" class="card-img" alt="...">
  </div>
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

user_9735520 
#card-blur:not(:hover){
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

try this on your css.

user_114196790
Related