html - layering divs and css -

i still learning how css , divs work together, , blur effect happen on background of each rollover, , not on red image overlaying it. don't know best way approach be.

jsfiddle

css:

.bg {     width:100%;     padding:70px 0px 70px 0px; } .wrapper {     width:94%;     max-width:800px;     margin:0px auto; } .itemleft {     width:48%;     background-color:#777;     float:left;     margin-left:1%;     margin-right:1%; } .item {     width:100%;     background-position:center center;     text-align:center;     background-image:url("http://lorempixel.com/300/150/sports/");     background-repeat: no-repeat; } .item img {     text-align:center; } .item:hover {     cursor:pointer;     width:100%;     background-position:center center;     text-align:center;     background-image:url("http://lorempixel.com/300/150/sports/");     background-repeat: no-repeat;     filter: blur(5px);     -webkit-filter: blur(5px);     -moz-filter: blur(5px);     -o-filter: blur(5px);     -ms-filter: blur(5px); } 

html:

<div class="bg">     <div class="wrapper">         <div class="itemleft">             <div class="item">                 <img src="http://placehold.it/128x150/a00000" />             </div>         </div>         <div class="itemleft">             <div class="item">                 <img src="http://placehold.it/128x150/f00000" />             </div>         </div>     </div> </div> 

the blur filter applied .item element and children, therefore img element going blurred if child.

one option make .item , img sibling elements instead:

updated example

<div class="itemleft">     <div class="item"></div>     <img src="http://placehold.it/128x150/a00000" /> </div> 

in doing so, absolutely position .item element relative parent element, .itemleft, fills entire element using top: 0/left: 0/bottom: 0/right: 0.

.itemleft {     position: relative; } .item {     width: 100%;     background: url("http://lorempixel.com/300/150/sports/") center center / auto auto no-repeat;     position: absolute;     top: 0; left: 0; bottom: 0; right: 0; } 

then position img element establish stacking context appears above sibling.

.wrapper img {     position: relative;     vertical-align: top; } 

finally, use selector .itemleft:hover .item apply blur filter .item element. in doing so, occur when hovering on parent element rather .item element.

updated example

.bg {      padding: 70px 0px;  }  .wrapper {      width: 94%;      max-width: 800px;      margin: 0px auto;  }  .itemleft {      width:48%;      background-color:#777;      float:left;      margin-left:1%;      margin-right:1%;      position: relative;      text-align: center;  }  .item {      width: 100%;      background: url("http://lorempixel.com/300/150/sports/") center center / auto auto no-repeat;      position: absolute;      top: 0; left: 0; bottom: 0; right: 0;  }  .wrapper img {      position: relative;      vertical-align: top;  }  .itemleft:hover .item {      cursor:pointer;      width:100%;      background-position:center center;      text-align:center;      background-image:url("http://lorempixel.com/300/150/sports/");      background-repeat: no-repeat;      filter: blur(5px);      -webkit-filter: blur(5px);      -moz-filter: blur(5px);      -o-filter: blur(5px);      -ms-filter: blur(5px);  }

<div class="bg">      <div class="wrapper">          <div class="itemleft">              <div class="item"></div>              <img src="http://placehold.it/128x150/a00000" />          </div>          <div class="itemleft">              <div class="item"></div>              <img src="http://placehold.it/128x150/f00000" />          </div>      </div>  </div>