Image with bordered title and caption on hover

HTML
<figure class="snip1121 grey"><img src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="sample18"/> <figcaption> <div> <h3>Insert<span> Header</span></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> </div> </figcaption><a href="#"></a>
CSS
//Image with bordered title and caption on hover// figure.snip1121 { font-family: 'Raleway', Arial, sans-serif; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; text-align: left; } figure.snip1121 * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } figure.snip1121 img { opacity: 1; width: 100%; } figure.snip1121 figcaption { top: 25px; left: 25px; right: 25px; bottom: 25px; position: absolute; padding: 15px 20px; } figure.snip1121 figcaption h3, figure.snip1121 figcaption p { margin: 0 0 8px; opacity: 0; } figure.snip1121 figcaption h3 { position: relative; font-weight: 400; text-transform: uppercase; -webkit-transform: translateY(75%); transform: translateY(75%); } figure.snip1121 figcaption h3 span { font-weight: 800; } figure.snip1121 figcaption p { position: absolute; font-size: 0.9em; font-weight: 500; text-align: right; bottom: 0; right: 0; padding: 10px 20px; } figure.snip1121 figcaption:before, figure.snip1121 figcaption:after, figure.snip1121 figcaption div:before, figure.snip1121 figcaption div:after { background-color: #ffffff; position: absolute; content: ""; display: block; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } figure.snip1121 figcaption:before, figure.snip1121 figcaption:after { width: 0; height: 1px; } figure.snip1121 figcaption div:before, figure.snip1121 figcaption div:after { width: 1px; height: 0; } figure.snip1121 figcaption:before, figure.snip1121 figcaption div:before { left: 0; top: 0; } figure.snip1121 figcaption:after { bottom: 0; left: 0; } figure.snip1121 figcaption div:after { top: 0; right: 0; } figure.snip1121 figcaption:after, figure.snip1121 figcaption div:after { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } figure.snip1121 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip1121.blue { background: #164666; } figure.snip1121.red { background: #6d2018; } figure.snip1121.yellow { background: #976008; } figure.snip1121:hover img, figure.snip1121.hover img { opacity: 0.2; -webkit-transform: scale(1.1); transform: scale(1.1); } figure.snip1121:hover figcaption h3, figure.snip1121.hover figcaption h3, figure.snip1121:hover figcaption p, figure.snip1121.hover figcaption p { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateY(0); transform: translateY(0); } figure.snip1121:hover figcaption p, figure.snip1121.hover figcaption p { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } figure.snip1121:hover figcaption:before, figure.snip1121.hover figcaption:before, figure.snip1121:hover figcaption:after, figure.snip1121.hover figcaption:after { width: 100%; } figure.snip1121:hover figcaption div:before, figure.snip1121.hover figcaption div:before, figure.snip1121:hover figcaption div:after, figure.snip1121.hover figcaption div:after { height: 100%; }
JAVASCRIPT
Expand for more options Login