Image Block with Animated Textbox Outline

HTML
<figure class="snip1333"><img src="https://images.unsplash.com/photo-1548153154-f96927e4eb9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80" alt="pr-sample17"/> <figcaption> <div class="border one"> <div></div> </div> <div class="border two"> <div></div> </div> <h3>Insert Header</h3> <p>The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris id fermentum nulla. Suspendisse nec congue purus.</p> </figcaption><a href="#"></a> </figure>
CSS
// image w/ text box border effect // @import url(https://fonts.googleapis.com/css?family=Ovo); @import url(https://fonts.googleapis.com/css?family=Muli); .snip1333 { font-family: 'Muli', Arial, sans-serif; position: relative; margin: 10px; padding: 0 20px 0 0; min-width: 230px; max-width: 315px; width: 100%; box-shadow: none !important; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-box-sizing: border-box; box-sizing: border-box; color: #ffffff; font-size: 16px; } .snip1333 * { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .snip1333 img { max-width: 100%; vertical-align: top; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .snip1333 .border { position: absolute; opacity: 0.45; z-index: 1; } .snip1333 .border:before, .snip1333 .border:after, .snip1333 .border div:before, .snip1333 .border div:after { background-color: #37413c; position: absolute; content: ""; display: block; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .snip1333 .border:before, .snip1333 .border:after { width: 0; height: 3px; } .snip1333 .border div:before, .snip1333 .border div:after { width: 3px; height: 0; } .snip1333 .border.one { left: -10px; top: -10px; right: 10px; bottom: 10px; } .snip1333 .border.one:before, .snip1333 .border.one div:before { left: 0; top: 0; } .snip1333 .border.one:after, .snip1333 .border.one div:after { bottom: 0; right: 0; } .snip1333 .border.two { left: 10px; top: 10px; right: -10px; bottom: -10px; } .snip1333 .border.two:before, .snip1333 .border.two div:before { right: 0; top: 0; } .snip1333 .border.two:after, .snip1333 .border.two div:after { bottom: 0; left: 0; } .snip1333 figcaption { right: 0px; bottom: 20px; position: absolute; padding: 25px; margin: 6px; background-color: #66cc99; max-width: 70%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .snip1333 h3, .snip1333 p { margin: 0; } .snip1333 h3 { font-family: 'Ovo', Arial, sans-serif; font-weight: 400; font-size: 1.5em; margin-bottom: 5px; } .snip1333 p { line-height: 1.6em; letter-spacing: 1px; font-size: 0.9em; } .snip1333 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } .snip1333:hover .border:before, .snip1333.hover .border:before, .snip1333:hover .border:after, .snip1333.hover .border:after { width: 100%; } .snip1333:hover .border div:before, .snip1333.hover .border div:before, .snip1333:hover .border div:after, .snip1333.hover .border div:after { height: 100%; }
JAVASCRIPT
Expand for more options Login