JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<div class="work-box-container">
    <div class="work-box">
        <div class="face primary">
            
            <div class="work-name">The library</div>
            <div class="blue"></div>
        </div>
        <div class="face secondary">
            
            <div class="cover" data-workid="69"></div>
            <div class="red"></div>
        </div>
    </div>
</div>

CSS

.work-box-container {
float: left;
height: 277px;
margin: 0 0 1.4% 1.4%;
position: relative;
width: 304px;
}

.work-box {
height: 277px;
position: relative;
width: 304px;
z-index: 1;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}

.work-box-container:hover .work-box{
z-index: 2;
-webkit-transform: rotateX(90deg) scale(1.1);
-moz-transform: rotateX(90deg) scale(1.1);
-ms-transform: rotateX(90deg) scale(1.1);
-o-transform: rotateX(90deg) scale(1.1);
transform: rotateX(90deg) scale(1.1);
}

.work-box .face.primary {
-webkit-transform: translateZ(138px);
-moz-transform: translateZ(138px);
-ms-transform: translateZ(138px);
-o-transform: translateZ(138px);
transform: translateZ(138px);
}

.work-box .face.secondary {
-webkit-transform: translatey(148px) rotateX(-90deg);
-moz-transform: translatey(148px) rotateX(-90deg);
-ms-transform: translatey(148px) rotateX(-90deg);
-o-transform: translatey(148px) rotateX(-90deg);
transform: translatey(148px) rotateX(-90deg);
}

.work-box .face {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0px;
height: 287px;
width: 314px;
}

.work-box .work-name {
position: absolute;
bottom: 9px;
left: 10px;
background: rgba(255, 255, 255, 0.8);
font-size: 18px;
height: 62px;
line-height: 21px;
padding: 10px;
width: 294px;
}

.blue,.red {
    height: 288px;
    width: 314px;
}

.blue {
    background: blue;
}

.red {
    background: red;
}

.work-box .cover {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
height: 100%;
width: 100%;
z-index: 1;
}