<div class="Container">
<div class="Card">
<div class="Card-thumbnail">
<img src="https://placeimg.com/640/480/tech" class="Card-thumbnailImage" />
<div class="Card-tags">
<span class="Label">Untagged</span>
</div>
<div class="Card-overlay">
<div class="Card-overlayActions">
<div class="Card-overlayAction">
<button type="button" class="Btn">
Edit
</button>
</div>
<div class="Card-overlayAction">
<div class="CardExtraActions">
<div class="CardExtraActions-actions">
<div class="CardExtraActions-actionsItem">
<button type="button" class="PlainBtn">
<i class="fa fa-exclamation-circle"></i>
</button>
</div>
<div class="CardExtraActions-actionsItem">
<button type="button" class="PlainBtn">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="CardExtraActions-defaultAction">
<button type="button" class="PlainBtn">
<i class="fa fa-ellipsis-h"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Card-body">
<img src="https://placeimg.com/40/40/people" class="Card-avatar" />
<div class="Card-info">
<h4 class="Card-title">
Samsung Galaxy S6
</h4>
<h5 class="Card-sub">
Uploaded by <a href="#" class="Card-subLink">Megatrix</a>
</h5>
</div>
</div>
</div>
</div>
$color-white: #fff;
$color-black: #4A4A4A;
$color-gray: #C4C4C4;
$color-crimson: #38D4A9;
$color-sky: #52B5E5;
$border-radius: 4px;
@mixin link-no-underscore() {
&, &:hover {
text-decoration: none;
}
}
@mixin text-ellipsis($max-width: 100%) {
overflow: hidden;
max-width: $max-width;
text-overflow: ellipsis;
white-space: nowrap;
}
* {
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: San Francisco, -apple-system, BlinkMacSystemFont, ".SFSNText-Regular", Segoe UI, Ubuntu, Helvetica, sans-serif;
}
.Card {
position: relative;
width: 100%;
background: $color-white;
border-radius: $border-radius;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
overflow: hidden;
&:hover .Card-overlay {
opacity: 1;
}
&:hover .Card-tags {
display: none;
}
.Card-thumbnail {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
background: $color-black;
}
.Card-thumbnailImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Card-tags {
position: absolute;
left: 10px;
bottom: 10px;
}
.Card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: $color-white;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: 0.2s all;
}
.Card-overlayActions {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
display: flex;
justify-content: space-between;
width: 100%;
text-align: center;
transition: 0.2s all;
}
.Card-overlayAction {
margin-top: auto;
}
.Card-body {
display: flex;
align-items: center;
padding: 10px;
}
.Card-avatar {
margin-right: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
}
.Card-info {
overflow: hidden;
}
.Card-title {
@include text-ellipsis;
margin-top: 0;
margin-bottom: 5px;
color: $color-black;
line-height: 1;
font-weight: bold;
}
.Card-sub {
@include text-ellipsis;
margin-top: 0;
margin-bottom: 0;
color: $color-gray;
line-height: 1;
font-weight: 400;
}
.Card-subLink {
@include link-no-underscore;
color: $color-gray;
font-weight: bold;
}
}
// Extension of card. Put into its own "top-class"
// for readability / modularity. Not meant to be "reused"
.CardExtraActions {
position: relative;
height: 50px;
width: 50px;
* {
color: $color-white !important;
}
&:hover .CardExtraActions-defaultAction {
opacity: 0;
right: -20px;
transition: 0.3s transform opacity;
}
&:hover .CardExtraActions-actions {
opacity: 1;
right: 0px;
transition: 0.3s all;
}
.CardExtraActions-defaultAction {
position: absolute;
opacity: 1;
right: 0px;
bottom: 0;
transition: 0.3s transform opacity;
}
.CardExtraActions-actions {
position: absolute;
right: 20px;
bottom: 0;
display: flex;
opacity: 0;
transition: 0.3s all;
}
.CardExtraActions-actionsItem {
opacity: 0.6;
transition: 0.15s opacity;
}
.CardExtraActions-actionsItem:not(:last-child) {
margin-right: 10px;
}
.CardExtraActions-actionsItem:hover {
opacity: 1;
}
}
.PlainBtn {
display: inline-block;
padding: 0;
background: none;
border: 0;
outline: 0;
cursor: pointer;
}
.Btn {
display: inline-block;
padding-left: 8px;
padding-right: 8px;
height: 25px;
line-height: 22px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
color: $color-white;
background: $color-crimson;
border: 0;
border-radius: $border-radius;
outline: 0;
transition: 0.15s background;
cursor: pointer;
&:hover,
&:focus {
background: lighten($color-crimson, 5%);
}
}
.Container {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
min-height: 100vh;
width: 300px;
}
.Label {
display: inline-block;
padding: 5px;
font-size: 10px;
text-transform: uppercase;
color: $color-white;
background: $color-sky;
border-radius: $border-radius;
}
View Compiled
This Pen doesn't use any external JavaScript resources.