outline-as-designer-fade

by sanford

HTML

<div class="show"><img src="http://placehold.it/400x400/000000&text=FigureOne"><div class="stripes">
<div class="stripe"></div>

<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
</div>
</div>

CSS

.show { position: relative; 
width: 400px; height: 400px; border-bottom: 9px solid red;}
.stripes { 
    position: absolute; top: 0; border: 0;
    height: 100%;
    width: 100%;
    clip: rect(auto,400px,auto,auto);
}
.stripe {
    border: 0px solid white; 
    height: 30px;
    width: 10px;
    margin-left: 200px;
    float: left;
    background: red;

    Ztop: 0%;
    Zright: 0;
    outline: rgba(29,29,29,.04) dotted  1000px;
   -webkit-transition: all 1400ms;
}
.show:hover .stripe {
    outline: rgba(29,29,29,0) dotted 1000px;
    -webkit-transition: all 1400ms ease-out;
}