<figure class="snip1551">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="sample69" />
<figcaption>
<h3>Benjamin Evalent</h3>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1551 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
<figcaption>
<h3>Bodrum Salvador</h3>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1551"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="sample74" />
<figcaption>
<h3>Hanson Deck</h3>
</figcaption>
<a href="#"></a>
</figure>
@import url(https://fonts.googleapis.com/css?family=Raleway);
.snip1551 {
font-family: 'Raleway', sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
font-size: 16px;
background-color: #000000;
}
.snip1551 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1551 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1551 figcaption {
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
z-index: 1;
border: 1px solid #ffffff;
overflow: hidden;
padding: 0;
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.8);
}
.snip1551 h3 {
position: absolute;
right: 0;
bottom: 0;
padding: 7px 15px;
margin: 0;
font-weight: normal;
font-size: 1em;
letter-spacing: 2px;
display: inline-block;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
color: rgba(255, 255, 255, 0);
}
.snip1551 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1551:hover > img,
.snip1551.hover > img {
opacity: 0.5;
}
.snip1551:hover h3,
.snip1551.hover h3 {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
color: #ffffff;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
Also see: Tab Triggers