Obfuscate part of the background-image, leaving other parts clear

Question

Obfuscate part of the background-image, leaving other parts clear

Navigation

#1 by (1 votes)

2

I'm trying to play this Dribble "example", though I'm not achieving. My current progress is this (using SCSS), however as it turns out I duplicated the background to achieve this effect, so that the images are aligned exactly one on top of the other I had to use background-position: center; which is not what I wanted (I would use the cover property). How can I make this "effect" using only a background image?

Compiling SCSS for CSS, it looks like this:

* {
  margin: 0;
  padding: 0px;
}

#container {
  box-shadow: 0 0 10px #202020;
  width: 800px;
  height: 280px;
  margin: 20px auto;
  background-image: url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  background-color: darkslategray;
  background-blend-mode: overlay;
  display: flex;
  justify-content: center;
  align-items: center;
}

#main {
  background-color: #fff;
  background-image: url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  border-radius: 10px;
  width: 80%;
  height: 80%;
}

<div id="container">
  <div id="main">
  </div>
</div>

html5 css3

asked by anonymous 04.06.2018 / 21:02

1 answer

Consume Json and direct to a database using C # What is the difference between HTMLCollection, NodeList and Object?

score 1 · Accepted Answer

Option 1

You can use mix-blend-mode:overlay in the element above the image. Here it is important that this element is white for overlay to be good, you can control the intensity of it with opacity

OBS: Notice that I kept background-blend-mode:color-burn in parent bg, and also used size of it as cover .

#container {
  box-shadow: 0 0 10px #202020;
  width: 800px;
  height: 280px;
  margin: 20px auto;
  background-image: linear-gradient(rgba(0,50,50,0.5) 0%, rgba(0,50,50,0.5) 100%), url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: color-burn;
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0 0 0px 50px rgba(0,0,0,0.5) inset; */
}

#main {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    border-radius: 10px;
    width: 80%;
    height: 80%;
    mix-blend-mode: overlay;
    opacity: 0.9;
}

<div id="container">
  <div id="main">
  </div>
</div>

Option 2:

If the rounded corners are no problem you get this result using a inset box-shadow

See the result in the example below:

#container {
  box-shadow: 0 0 10px #202020;
  width: 800px;
  height: 280px;
  margin: 20px auto;
  background-image: url(https://thumbs.dreamstime.com/b/usa-new-york-panorama-sunrise-71107239.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0px 50px rgba(0,50,50,0.5) inset;
}

<div id="container">
  <div id="main">
  </div>
</div>