HTML
<figure class="snip1162">
<img src="https://images.unsplash.com/photo-1437751953995-d9d8810418ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="sq-sample22" />
<figcaption>
<div class="heading">
<h2>Insert <span> Header</span></h2>
</div>
<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.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>
CSS
//Image and title with bordered caption on hover //
figure.snip1162 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 310px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1162 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
figure.snip1162 img {
max-width: 100%;
position: relative;
opacity: 0.9;
}
figure.snip1162 figcaption {
position: absolute;
top: 45%;
left: 7%;
right: 7%;
bottom: 45%;
border: 1px solid white;
border-width: 0 1px 1px;
}
figure.snip1162 .heading {
overflow: hidden;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
figure.snip1162 h2 {
display: table;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1162 h2 span {
font-weight: 800;
}
figure.snip1162 h2:before,
figure.snip1162 h2:after {
position: absolute;
display: block;
width: 1000%;
height: 1px;
content: '';
background: white;
top: 50%;
}
figure.snip1162 h2:before {
left: -1000%;
}
figure.snip1162 h2:after {
right: -1000%;
}
figure.snip1162 p {
top: 50%;
font-size: 0.9em;
font-weight: 500;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
width: 100%;
padding: 0 20px;
margin: 0;
opacity: 0;
}
figure.snip1162 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1162:hover img,
figure.snip1162.hover img {
opacity: 0.25;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1162:hover figcaption,
figure.snip1162.hover figcaption {
top: 7%;
bottom: 7%;
}
figure.snip1162:hover p,
figure.snip1162.hover p {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
