Image, title and position with hover effect
A Pen by Tony Dolan on CodePen.
Image, title and position with hover effect
A Pen by Tony Dolan on CodePen.
<figure class="snip1580"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="profile-sample2"/> | |
<figcaption> | |
<h3>Giles Posture</h3> | |
<h5>UX Design</h5> | |
</figcaption><a href="#"></a> | |
</figure> | |
<figure class="snip1580"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample116.jpg" alt="profile-sample7"/> | |
<figcaption> | |
<h3>Wisteria Ravenclaw</h3> | |
<h5>Sound & Vision</h5> | |
</figcaption><a href="#"></a> | |
</figure> | |
<figure class="snip1580"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample117.jpg" alt="profile-sample6"/> | |
<figcaption> | |
<h3>Gunther Beard</h3> | |
<h5>Web Development</h5> | |
</figcaption><a href="#"></a> | |
</figure> |
/* Demo purposes only */ | |
$(".hover").mouseleave( | |
function () { | |
$(this).removeClass("hover"); | |
} | |
); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Raleway); | |
.snip1580 { | |
font-family: 'Raleway', Arial, sans-serif; | |
position: relative; | |
display: inline-block; | |
overflow: hidden; | |
margin: 8px; | |
min-width: 250px; | |
max-width: 310px; | |
width: 100%; | |
background-color: #000000; | |
color: #ffffff; | |
text-align: left; | |
font-size: 16px; | |
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
} | |
.snip1580 * { | |
-webkit-transition: all 0.35s; | |
transition: all 0.35s; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.snip1580 img { | |
max-width: 100%; | |
vertical-align: top; | |
} | |
.snip1580 figcaption { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
padding: 20px; | |
background-color: rgba(0, 0, 0, 0.75); | |
} | |
.snip1580 h3 { | |
font-size: 20px; | |
font-weight: 400; | |
line-height: 20px; | |
margin: 3px 0; | |
} | |
.snip1580 h5 { | |
font-weight: 400; | |
margin: 0; | |
color: #bbb; | |
letter-spacing: 1px; | |
} | |
.snip1580 a { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.snip1580:hover figcaption, | |
.snip1580.hover figcaption { | |
top: 20px; | |
left: 20px; | |
right: 20px; | |
bottom: 20px; | |
background-color: #fff; | |
} | |
.snip1580:hover h3, | |
.snip1580.hover h3, | |
.snip1580:hover h5, | |
.snip1580.hover h5 { | |
color: #333; | |
} | |
/* Demo purposes only */ | |
body { | |
background-color: #212121; | |
text-align: center; | |
} |