Set Opacity on CSS Element

Question

I'd like the triangle shape at the foot of this page to be a solid colour with no transparency. Is this easy to achieve? I'm just not sure which element to target.

Here is my JSFiddle: http://jsfiddle.net/webtiki/fcLkW/9/

and my code :

css

 html, body{
    height: 100%;
    margin:0;
}
.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-45deg);
    transform : rotate(-45deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(45deg);
    transform : rotate(45deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}
video{
    min-width:100%;
    min-height:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0;
    z-index:10;
    opacity:0.5;
}

html

<div class="out">
    <div class="in"></div>
    <video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
                <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
                <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
            </video>
</div>

Can someone assist?

Many thanks for any pointers :-)

The problem is that the video is in the front with opacity: 0.5. You should bring .in:after in front of the video. — Barnee
– Barnee, Commented Jul 3, 2014 at 10:06
Hi @Barnee - any chance you could take a look? My efforts so far have failed badly. — michaelmcgurk
– michaelmcgurk, Commented Jul 3, 2014 at 10:16

Ninita · Accepted Answer · 2014-07-03 10:35:08Z

4

I think I got what you want. Change your CSS code with this (JSFiddle code):

html, body{
    height: 100%;
    margin:0;
}
.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    z-index:20;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-135deg);
    transform : rotate(-135deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(315deg);
    transform : rotate(315deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}
video{
    min-width:100%;
    min-height:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0;
    z-index:10;
    opacity:0.5;
}

answered Jul 3, 2014 at 10:35

Ninita

1,2473 gold badges22 silver badges50 bronze badges

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

6 Comments

michaelmcgurk Over a year ago

Ooooh - that's almost 100% perfect. Is there a way to remove the bottom rectangle block?

Ninita Over a year ago

You mean the red rectangle? I can try

Ninita Over a year ago

To do that change the .in height to 100% ;) JSFiddle code

Ninita Over a year ago

You too :D I'm glad to help

Andrea Ligios Over a year ago

Good spot @Ninita, +1

|

Key · Accepted Answer · 2014-07-03 10:25:53Z

1

The thing that you have done is put the video as the top element and reduced the opacity to show items behind it.

what you would need to do is change the following 2 values on the bottom and left/right shapes.

z-index: 20;
opacity: 0.5;

After doing this though as the bottom 1 is a whole block, it covers the whole video, may have to rethink your shapes, or use an image overlay.

http://jsfiddle.net/fcLkW/21/

answered Jul 3, 2014 at 10:25

Key

3964 silver badges16 bronze badges

1 Comment

michaelmcgurk Over a year ago

This is very close, Khyam - can you think of a better way so the bottom block isn't solid like that? Is that possible?

Dim O · Accepted Answer · 2014-07-03 10:18:13Z

0

You need just set the triangle to top layer, because now the block "DIV.inn" is under video, and you see it through transparent video.

Change your code like:

CSS

.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
z-index:1000;

}

answered Jul 3, 2014 at 10:18

Dim O

1

2 Comments

michaelmcgurk Over a year ago

Using that code, I get this result: jsfiddle.net/fcLkW/22 which isn't great as I appear to lose the transparency on the other 3 shapes.

Dim O Over a year ago

Sorry, this is my low English. I mixed triangles ))

Collectives™ on Stack Overflow

Set Opacity on CSS Element

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related