javascript - Trace div on hover? -

right have 6 floated divs, each image background. there 4.5px margin on each div looks there border. want make on hover, div's "border" traced/filled in different color. how do that?

        <div id="one" >         </div>         <div id="two" >                      </div>         <div id="three" >                        </div>         <div id="four" >                         </div>         <div id="five" >                         </div>         <div id="six" >          </div> 

here's css:

#one,#two,#three,#four,#five,#six{ max-height:400px; background-color: grey; margin:4.5px;    height:60vh; width:417px; max-width:417px; float:left; background-size: cover; opacity:.9; text-align:center; }  #one{ background-image:url('../images/1.jpg'); } #two{ background-image:url('../images/2.jpg'); } #three{ background-image:url('../images/3.jpg'); } #four{ background-image:url('../images/4.jpg'); } #five{ background-image:url('../images/5.jpg'); } #six{ background-image:url('../images/6.jpg'); }  #one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{ opacity:1; box-shadow:  0 0 0 8px white; } 

one approach use svg element instead of div animate border (stroke) using stroke-dashoffset , stroke-dasharray.

http://jsfiddle.net/moogs/zluercaa/