CODEWITHSUNDEEP
css
Mamdlv
Mamdlv

Reputation: 550

Add border over a blurred image

I am trying to add a solid border over a blurred image but the border does not show up.

When I comment out the blurred effects in css the border will show up (with of course a clear image) but when I add them in again the border disappears. Any idea what I am doing wrong here?

Here is the css:

.top-background-image {
  
      filter: blur(4px);
      -webkit-filter: blur(4px);
      width: 1600px;
      height: 800px;
      border: 5px solid #555;
     
    } 

Here is the function where the class is contained: 

    function TopContainer() {
  return (
    <div>
      <div >
      <img className="top-background-image" src="image.jpeg" alt="image"/>
      </div>
      <div>
      <h1 className = "mike animate__animated animate__fadeInLeftBig ">Hi, I'm a baker.</h1><span><h2 className="programmer animate__animated animate__fadeInRightBig animate__delay-1s" >a cookie shop for you.</h2></span>
      <img className ="image.jpg" alt="profile"/>
      </div>
      <div className="face">
      <MiddleContainer/>
      </div>
    </div>  
  )
}

Upvotes: 2

Views: 51

Answers (1)

Amani
Amani

Reputation: 3977

Add a span around img and put border on span instead of img:

.top-background-image {
      filter: blur(4px);
      -webkit-filter: blur(4px);
      width: 1600px;
      height: 800px;
} 

.imageBorder{
    border: 5px solid #555;
}

<span class="imageBorder"><img className="top-background-image" src="image.jpeg" alt="image"/></span>

Upvotes: 2

Related Questions