css3 - Use css ::before to place blurred circle behind image -

how black circles (shadows) behind images?

jsfiddle demo

i using background image sprites position round button images on span tags. wish put shadow behind each image visual effect, cannot position black dots behind button images.

although works if reverse things , put black dot on span tag , button pic on image tag, there many of these buttons , black dots appear @ once, , after several seconds button images appear @ once on top of dots. works, looks crap.

so, need solution keeps button images on span tags, , somehow positions blurry black circle (shadow) behind span tag background image.

here have tried (note disabled attempt use ::before pseudo-class.

html:

<div class="container"></div> <div class="tabmenu">     <span id="sml_1"><img class="smalliconsprite" src="blank.png" width="40" height="40" /></span>     <span id="sml_2"><img class="smalliconsprite" src="blank.png" width="40" height="40" /></span>     <span id="sml_3"><img class="smalliconsprite" src="blank.png" width="40" height="40" /></span>     <span id="sml_4"><img class="smalliconsprite" src="blank.png" width="40" height="40" /></span>     <span id="sml_5"><img class="smalliconsprite" src="blank.png" width="40" height="40" /></span>     <span id="sml_6"><img class="smalliconsprite" src="blank.png" width="40" height="40" /></span> </div> 

css:

.container{width:800px;height:620px;padding-left:108px;margin-left:-400px;} .container{background-image:url(background.jpg);background-repeat:no-repeat;}  .tabmenu{position:absolute;left:0;top:50px;z-index:1;} .tabmenu{width:200px;height:700px;margin-left:320px;margin-top:55px;}  .tabmenu span{display:inline-block;height:35px;width:31px;margin:1px 7px;padding:5px 0px 0px 10px;} .tabmenu span{background-image:url(button_icons.gif);background-repeat:no-repeat;} .tabmenu span:hover{opacity:0.8;cursor:pointer;}  xxx.tabmenu span::after{width:46px;height:46px;content:url(blackdot.png);position:relative;top:-55px;left:-18px;}  .smalliconsprite{position:relative;top:-10px;left:-15px;width:45px;height:45px;} .smalliconsprite{background-image:url(blackdot.png);background-repeat:no-repeat;background-position:-5px -5px;}  #sml_1{background-position:0px 0px;} #sml_2{background-position:-40px 0px;} #sml_3{background-position:-80px 0px;} #sml_4{background-position:0px -40px;} #sml_5{background-position:-40px -40px;} #sml_6{background-position:-80px -40px;} 

simplest fix: use z-index: -1; on images. position them behind icons. add

img.smalliconsprite { z-index: -1; }  

updated fiddle.

but think, it's nicer not have img tags @ all. after all, background , don't have semantic value in document. html this:

<div class="tabmenu">     <span id="sml_1"></span>     <span id="sml_2"></span>     <span id="sml_3"></span>     <span id="sml_4"></span>     .... 

instead of setting image on span, , background in img tag, can use ::before , ::after pseudo-elements both. way, can set images in after, background in before, , image automatically on top. span used positioning , (in case) doesn't have visible characteristics.

by using pseudo elements, don't need img tag @ all, good, since shadow , doesn't add semantic value document.

you can use absolute position before , after elements, long add position: relative span.

in scenario still used shadow image, try use css shadows well. also, may add shadow button image sprite have 1 background image.

.container{      width:800px;height:620px;padding-left:108px;margin-left:-400px;      background-image: url(http://goodwinstudio.com/_dev/images/bg_filmprojects.jpg);      background-repeat: no-repeat;  }    .tabmenu{position:absolute;left:0;top:50px;z-index:1;}  .tabmenu{width:200px;height:700px;margin-left:320px;margin-top:55px;}    /* position buttons */  .tabmenu span{      display:inline-block;      height:40px;      width:40px;      margin:7px 7px;      position: relative;  }  /* images positioned @ 0,0 inside span */  .tabmenu span:after{      content: "";       display: block;      position: absolute;      top: 0;      left: 0;      height:100%; /* or 40px */      width:100%;      background-image: url(http://goodwinstudio.com/_dev/img/btns5.gif);      background-repeat:no-repeat;  }  .tabmenu span:hover:after{opacity:0.8;cursor:pointer;}    /* shadow image has negative offset */  .tabmenu span::before{      width: 46px;      height:46px;      content: url(http://goodwinstudio.com/_dev/images/bgactive2.png);      position:absolute;      top:-6px;      left:-6px;  }      #sml_1:after{background-position:0px 0px;}  #sml_2:after{background-position:-40px 0px;}  #sml_3:after{background-position:-80px 0px;}  #sml_4:after{background-position:0px -40px;}  #sml_5:after{background-position:-40px -40px;}  #sml_6:after{background-position:-80px -40px;}

<div class="container"></div>  <div class="tabmenu">      <span id="sml_1"></span>      <span id="sml_2"></span>      <span id="sml_3"></span>      <span id="sml_4"></span>      <span id="sml_5"></span>      <span id="sml_6"></span>  </div>  <button>toggle black dot</button>

updated fiddle