part of div transparent - css

Question

I would like to create a menu that consists of three layers.
The menu is supposed to stretch over the entire screen width.
The first layer is an image that contains a gradient. Since the menu is stretched over the width the amount of change/width in color depends. It looks something like this:
The second layer looks just like the first layer, but lets say blue instead of red. So it contains that same gradient. I want to overlay parts of this layer with the first to highlight a selected menu item.
The third layer contains the menu items.
Here's a jsfiddle: http://jsfiddle.net/UrVq2/9/
and it's corresponding code:
HTML:
<div id="firstLayer"></div>
<div id="secondLayer"></div>
<div id="thirdLayer">Click me</div>
CSS:
#firstLayer {
background-image:url('http://s21.postimg.org/imynbhjo7/example.jpg');
background-size: 100% 100%;
width: 100%;
height: 100px;
min-width:900px;
position:absolute;
left:0;
top:0
}
#secondLayer {
background-image:url('http://s13.postimg.org/5o17i8wwn/example2.jpg');
background-size: 100% 100%;
width: 100%;
height: 100px;
min-width:900px;
position:absolute;
left:0;
top:0
}
#thirdLayer {
position:absolute;
top: 50px;
left: 50%;
}
When something in the menu is to highlight, and to get a match between the first layer gradient and the second layer gradient, I stretch both first and second layer over the entire width of the screen. Then I try to make the parts of the second layer that are not to highlight transparent. However, I fail doing so. Is there a way to achieve it, or should I take another approach?
e.g. I have tried following https://stackoverflow.com/a/8422890/1419386, however I cannot apply 1. and 3. suggestion, due to the gradient. 2. suggestion I don't believe I can apply, I want a sudden transparency at a point in the image and not some gradient into transparency.
(just splitting the gradient off from both layers does not work for me because it actually also difuses with the color beneath it (red or blue), so it is a little bit a simplified example).

Answer 1

There are 3 different posibilities that I can think of to solve your problem.
All of them are based on clipping instead of transparency, so the first thing that we need to do is to change the order of the divs:
HTML:
<div id="thirdLayer">hover me</div>
<div id="secondLayer"></div>
<div id="firstLayer"></div>
I have moved also the third layer in the front so that I can use the hover state without script, but this is not important.
The first posibility uses clip. Css:
#firstLayer {
background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 100px;
min-width:900px;
position:absolute;
left:0;
top:0;
clip: rect(10px,0px,80px,0px);
-webkit-transition: all 2s;
}
#secondLayer {
background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 100px;
min-width:900px;
position:absolute;
left:0;
top:0
}
#thirdLayer {
position:absolute;
top: 110px;
left: 50%;
}
#thirdLayer:hover ~ #firstLayer {
clip: rect(10px,800px,80px,400px);
}
Most of the CSS is standard stuff. I have replaced youyr images with gradients, so that the example does not depend on the availability of them. The key issue is using
clip: rect(10px,800px,80px,400px);
To show only the part of the div that you want. The main problem with this solution is that it is not posible to use percentages in that property, so it is of limited use if you want it to be flexible.
demo 1
The second posibility is to play with the background-size:
#firstLayer {
background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
background-size: 1000% 40%, 1000% 100%;
background-repeat: no-repeat;
backgrond-position: -10% 0%;
width: 10%;
height: 100px;
position:absolute;
left:-10%;
top:0;
-webkit-transition: all 3s;
transition: all 3s;
}
#secondLayer {
background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 100px;
position:absolute;
left:0;
top:0
}
#thirdLayer {
position:absolute;
top: 110px;
left: 50%;
}
#thirdLayer:hover ~ #firstLayer {
left: 47%;
background-position: 47% 0%, 47% 0%;
}
demo 2
Notice that to compensate that the width of the background is now 10%, the background size is now 1000%, so the porportion is the same:
There can be slight offsets in rendering, due to the different calculus, but the system is quiet good.
The third posibility is to use a clipping mask (with limited browser support)
#firstLayer {
background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;
background-position: 0% 0%;
width: 100%;
height: 100px;
position:absolute;
left:0;
top:0px;
-webkit-transition: all 3s;
transition: all 3s;
}
#secondLayer {
background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 100px;
position:absolute;
left:0;
top:0;
}
#thirdLayer {
position:absolute;
top: 110px;
left: 50%;
}
#firstLayer {
-webkit-mask-position: -15% 0px;
-webkit-mask-size: 84px 100%;
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
-webkit-mask-repeat: no-repeat;
}
#thirdLayer:hover ~ #firstLayer {
-webkit-mask-position: 52% 0px;
}
We define a mask, and the only remaining issue is to set the position
demo3