WordPress

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
Previous Post
Featured Site Friday – Marketing Insider Group
Next Post
Featured Site Friday – FragranceLock

Related Articles

Menu
Google Rating
5.0
Based on 54 reviews
×
Get a Quote