i create menu consists of 3 layers. menu supposed stretch on entire screen width.
the first layer image contains gradient. since menu stretched on width amount of change/width in color depends. looks this: 
the second layer looks first layer, lets blue instead of red. contains same gradient. want overlay parts of layer first highlight selected menu item.
the third layer contains menu items.
here's jsfiddle: http://jsfiddle.net/urvq2/9/ , 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 in menu highlight, , match between first layer gradient , second layer gradient, stretch both first , second layer on entire width of screen. try make parts of second layer not highlight transparent. however, fail doing so. there way achieve it, or should take approach?
e.g. have tried following https://stackoverflow.com/a/8422890/1419386, cannot apply 1. , 3. suggestion, due gradient. 2. suggestion don't believe can apply, want sudden transparency @ point in image , not gradient transparency.
(just splitting gradient off both layers not work me because difuses color beneath (red or blue), little bit simplified example).
there 3 different posibilities can think of solve problem.
all of them based on clipping instead of transparency, first thing need change order of divs:
html:
<div id="thirdlayer">hover me</div> <div id="secondlayer"></div> <div id="firstlayer"></div> i have moved third layer in front can use hover state without script, 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: 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 css standard stuff. have replaced youyr images gradients, example not depend on availability of them. key issue using
clip: rect(10px,800px,80px,400px); to show part of div want. main problem solution is not posible use percentages in property, of limited use if want flexible.
demo 1
the second posibility play 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: 3s; transition: 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 compensate width of background 10%, background size 1000%, porportion same: there can slight offsets in rendering, due different calculus, system quiet good.
the third posibility use 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: 3s; transition: 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 mask, , remaining issue set position
demo3
Comments
Post a Comment