html - Box-shadow over image? -
fiddle: http://jsfiddle.net/g5faq/
i have image contained in div. div next said image has box shadow. want box-shadow of div overlap image, looks image part of div in, rather appearing hover strangely on it. tried z-index, you'll see in fiddle, seems have failed.
html:
<body> <nav id="navigation"> <img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" width="250px" alt="logo"> </nav> <div id="content_wrapper"> <!-- instancebegineditable name="content" --> <section id="content"> content. </section> <!-- instanceendeditable --> </div> </div> </body>
css:
body { background: #ffd288; } /*nav*/ #navigation { width:100%; z-index: 10; } .logo { z-index: 1; } /*content section*/ #content { background: #393951; height: 2000px; z-index: 10; -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8); box-shadow: 0px 0px 20px rgba(0,0,0,.8); }
you had it! need add position absolute or relative container! position relative if want container act normal dom element, or absolute if want float freely!
position:relative;
good luck , let me know if have question :)
Comments
Post a Comment