.team-card {
padding-bottom: 100%;
position: relative;
width: 100%;
}
.team-card img {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.team-card .card-front,
.team-card .card-back {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 0.3s;
}
.team-card:hover .card-front {
transform: rotateY(-180deg);
}
.team-card:hover .card-back {
transform: rotateY(0);
}
.team-card .card-back {
overflow: hidden;
transform: rotateY(-180deg);
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter