Add opacity on an image

Question

I'm going straight to the point here. I want to create a simple window within an image. outside the window will have a opacity like on the sample picture.

I'm not really good when it comes to css so please bear with me.

.section2{
 }

.section2 .row{
 margin: 0;
}
.the-container{
 position: relative;
 width: 100%;
 height: 450px;
}
.the-container .text-center{
 background: #fff;
 opacity: .9;
}

.img-canvas{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
background-size: 100% 100%;
background-position: 50% 50%;
background-attachment: scroll;
z-index: -1;
}
.window{
position:absolute;
width:50%;
height:50%;
background-size: cover;
top:0;
left:25%;
z-index: -1;
opacity: 1;
}

<section class="section2" style="height:100vh;">
<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="the-container">
            <div class="img-canvas"></div>
            <div class="window"></div>
        </div>
    </div>
</div>
</section>

something like this:

and here's a fiddle for you to manipulate the code: https://jsfiddle.net/Lk21vL01/

thanks in advance.

Hei!! Is it violating this stackoverflow regulation?! You should do it on your own. Not to asking question to get the whole things done by others. — Sherly Febrianti
– Sherly Febrianti, Commented Nov 25, 2016 at 4:07
@sherlyfebrianti, OP has posted their attempts, i wouldnt consider this asking people to do the whole thing per se — haxxxton
– haxxxton, Commented Nov 25, 2016 at 4:08
@sherlyfebrianti sorry for this. I've tried something but didn't put everything.. I have a header there but that takes the opacity.. however I can't really figure out how to make the both sides of the image. — Sam Teng Wong
– Sam Teng Wong, Commented Nov 25, 2016 at 4:08
hey this link could be helpful to you stackoverflow.com/questions/26622143/… — Geeky
– Geeky, Commented Nov 25, 2016 at 4:09

haxxxton · Accepted Answer · 2016-11-25 04:11:41Z

2

You were very close, you just needed to apply similar styling to your .window element and use background-attachment:fixed

see this updated jsfiddle

.section2{
}

.section2 .row{
  margin: 0;
}
.the-container{
  position: relative;
  width: 100%;
  height: 450px;
}
.the-container .text-center{
    background: #fff;
    opacity: .9;
}
.window,
.img-canvas{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-attachment:fixed;
    z-index: -1;
    opacity: 0.5;
}
.window{
  position:absolute;
  width:50%;
  height:50%;
  top:0;
  left:25%;
  z-index: -1;
  opacity: 1;
}

answered Nov 25, 2016 at 4:11

haxxxton

6,4423 gold badges29 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Teng Wong Over a year ago

thanks.. this is what I was looking for. I'll accept your answer within 4 mins.

Alfred Xing · Accepted Answer · 2016-11-25 04:15:34Z

2

Not the most proper way to achieve this, but you could use a box-shadow "hack" to create the effect you're looking for. Just set a box shadow around the window with 0 blur and a spread that will always bigger than the background (something like 1000, or even 5000 pixels).

#background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, slategray, #333);
  overflow: hidden;
}

#window {
  position: absolute;
  width: 250px;
  height: 100px;
  top: 25%;
  left: 25%;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.75);
}

<div id="background">
  <div id="window">
  </div>
</div>

answered Nov 25, 2016 at 4:15

Alfred Xing

4,6703 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

Add opacity on an image

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related