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; 

http://jsfiddle.net/g5faq/1/

good luck , let me know if have question :)


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -