Hover border animation

HTML
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <div class="parent"> <div class="content"> <h2>Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl. </div> <div class="border"></div> </div> <div class="parent"> <div class="content"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl.</p> </div> <div class="border"></div> </div> <div class="parent"> <div class="content"> <h2>Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl. </div> <div class="border"></div> </div> <div class="parent"> <div class="content"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl.</p> </div> <div class="border"></div> </div> <div class="parent"> <div class="content"> <h2>Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl. </div> <div class="border"></div> </div> <div class="parent"> <div class="content"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mauris at diam vestibulum sodales non a nunc. Nullam dapibus, mauris vel vulputate bibendum, lectus erat dignissim metus, ac cursus sapien nisi in mi. Sed pretium dapibus risus, vel rutrum velit. Quisque nec fringilla mi. Integer quis consectetur eros. Phasellus nec pretium nibh, ut aliquam dui. Cras pretium non nisi ut facilisis. In ut dui eros. Integer et nulla nisl.</p> </div> <div class="border"></div> </div>
CSS
body{ font-family: 'Lato', sans-serif; text-align:center; padding: 0 0 40px 0; } h2{ border-style:solid; border-width:0 0 1px 0; border-color:#336699; margin:0 0 10px 0; padding:0; } .parent{ vertical-align: top; width: calc(100% - 60px); max-width:500px; display:block; position:relative; margin:40px auto 0 auto; cursor:pointer; -webkit-box-shadow: 0 0 10px 0 #999999; box-shadow: 0 0 10px 0 #999999; transition: all 0.5s; } .parent:hover{ -webkit-box-shadow: 0 0 10px 0 #333333; box-shadow: 0 0 10px 0 #333333; } .parent:hover .border{ width:100%; opacity:1; height:3px; } .parent:hover .content{ background-color:#fff; } .content{ width:calc(100% - 40px); padding:20px; height:auto; background-color:#efefef; line-height:1.5rem; font-size:0.75rem; transition:all 0.5s; text-align:left; } .border{ opacity:0; transition:all 0.5s; width:0px; display:block; position:relative; margin:0 auto; height:3px; background-color:#336699; }
JAVASCRIPT
Expand for more options Login