Divi Flipbox

In need of creating a Divi Flipbox? We’ve got you.

To make a Flipbox in Divi, add the following code to the CSS, and then add the “flippy” class to a person module.

The image uploaded to the module will be on the front of the box, and the title, links and description will be on the back. You can also pick the background color for the box in the module.

.flippy {
position: relative;
float: left;
padding-bottom: 100%; /*adjusting this will change the box ratio. Having them equal makes a square*/
width: 100%;
text-align: center;
}

.flippy .et_pb_team_member_image,
.flippy .et_pb_team_member_description {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.flippy .et_pb_team_member_image img {
height: 100%;
object-fit: cover;
}

.flippy .et_pb_team_member_description {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10%; /*padding for the flipbox*/
}

.flippy:hover .et_pb_team_member_image {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.flippy:hover .et_pb_team_member_description {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}