<div class="flex-container">
<div class="flex-item">
<div class="cutebox purple">
<div class="cutebox-bg"></div>
<footer>
<span class="color-name">Purple</span>
<span class="color-value">A35DB5</span>
</footer>
</div>
</div>
<div class="flex-item">
<div class="cutebox pink">
<div class="cutebox-bg"></div>
<footer>
<span class="color-name">Pink</span>
<span class="color-value">FF55A1</span>
</footer>
</div>
</div>
<div class="flex-item">
<div class="cutebox blue">
<div class="cutebox-bg"></div>
<footer>
<span class="color-name">Blue</span>
<span class="color-value">00CCFE</span>
</footer>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto');
$box-height: 320px;
$box-width: 220px;
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
background: #FAFAFA;
}
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 24px 0;
position: absolute;
width: 100%;
max-width: 1200px;
margin: auto;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 0 5%;
@media (max-width: 640px) {
top: 0;
transform: translateY(0);
}
>.flex-item {
flex: 0 1 33.33%;
@media (max-width: 640px) {
flex: 0 1 100%;
padding-bottom: 32px;
&:first-child{
padding-top: 32px;
}
}
}
}
.cutebox {
height: $box-height;
width: $box-width;
position: relative;
border-radius: 4px;
overflow: hidden;
font-family: Roboto, sans-serif;
margin: auto;
transition: transform .2s ease, box-shadow .2s ease;
will-change: transform;
transform: translateZ(0);
@media (max-width: 960px){
height: $box-height/1.1;
width: $box-width/1.1;
}
@media (max-width: 768px){
height: $box-height/1.3;
width: $box-width/1.3;
}
@media (max-width: 640px) {
width: 100%;
}
&:after {
content: "";
color: white;
display: block;
position: absolute;
z-index: 5;
width: 100%;
height: calc(100% - 96px);
line-height: 240px;
text-align: center;
top: 0;
left: 0;
font-size: 48px;
outline-offset: -90px;
opacity: 0;
transition: opacity .4s ease;
will-change: opacity, transform;
@media (max-width: 960px){
line-height: 200px;
}
@media (max-width: 768px){
line-height: 160px;
}
}
&.purple {
color: #A35DB5;
box-shadow: 0 0 32px rgba(#A35DB5, 0.2);
&:after{
content:"👾";
letter-spacing: 2px;
}
}
&.pink {
color: #FF55A1;
box-shadow: 0 0 32px rgba(#FF55A1, 0.2);
&:after{
content:"🦄";
letter-spacing: 6px;
}
}
&.blue {
color: #00CCFE;
box-shadow: 0 0 32px rgba(#00CCFE, 0.2);
&:after{
content:"🐳";
}
}
.cutebox-bg {
position: absolute;
background: currentColor;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-shadow: inset 0 0 0 1px rgba(black, 0.1);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
footer {
width: 100%;
height: 96px;
background-color: white;
position: absolute;
bottom: 0;
padding: 24px 24px;
border: 1px solid rgba(#000, 0.1);
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
span {
display: inline-block;
width: 100%;
line-height: 1.4;
font-weight: bold;
&.color-name {
font-size: 16px;
color: rgba(black, 0.40);
letter-spacing: 0.4px;
}
&.color-value {
font-size: 20px;
color: rgba(black, 0.80);
letter-spacing: 0.4px;
}
}
}
&:hover {
transform: scale(1.05) translateY(-5px) translateZ(0);
&:after {
opacity: 1;
animation: zoomout .2s ease;
}
&.purple {
color: #A35DB5;
box-shadow: 0 0 48px rgba(#A35DB5, 0.1);
}
&.pink {
color: #FF55A1;
box-shadow: 0 0 48px rgba(#FF55A1, 0.1);
}
&.blue {
color: #00CCFE;
box-shadow: 0 0 48px rgba(#00CCFE, 0.1);
}
footer span.color-value {
color: currentColor !important;
}
}
}
@keyframes zoomout {
from {
transform: scale(5);
}
to {
transform: scale(1)
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.