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);

Need help?

Tell us about your project!

  • Date Format: MM slash DD slash YYYY
  • This field is for validation purposes and should be left unchanged.

Related articles

Google Rating
Based on 62 reviews