How to make an image partially blurry in css?-CodePudding

I'm trying to implement this design using CSS and HTML:

As you can see. There is an image of dog, and on top of it is a div with text "Dog". The div blurs the part of the image it covers. So I tried this:

html:

<div>    
    <img  src="source.png" />
    <div >Dog</div>
</div>

CSS:

.profile-name {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: black;
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  opacity: 60%;
  // filter: blur(1px); // Does not work since it actually blurs the actual name, not the image underneath
}

As you can see, the image beneath the div is NOT blurry. How would I go about making the underneath image blurry using proper techniques? I would appreciate any help. Thanks!

CodePudding user response：

You can use backdrop-filter to apply a filter behind an element: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

.profile-name {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: black;
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  opacity: 60%;
  backdrop-filter: blur(1px);
}

CodePudding user response：

You don't need opacity or filter, just use:

background-color: #00000050;

50 is 50% transparent of black. You can adjust it to get expected result.