.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