CODEWITHSUNDEEP
htmlcssbootstrap-5
malibil
malibil

Reputation: 179

How to blur an image without blurring the text?

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/[email protected]/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>

Upvotes: 2

Views: 1067

Answers (2)

FreedomBright __
FreedomBright __

Reputation: 3

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

try this on your css.

Upvotes: 0

StudioTime
StudioTime

Reputation: 23989

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/[email protected]/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>

Upvotes: 2

Related Questions