Divi Blurb Look: Sliding Cards with Text on Hover

May 20, 2023

Updated Jan 2024

This code turns Divi blurbs into slider style cards with blurb text showing on hover.

Notes

Download, unzip, and import the .json file into a new page, not the Divi library.

Most of the styling (text color, font weight, etc) is in the module settings.

CSS Code

/*** SLIDING BLURB CARDS ***/
 .blurb-slider-row .et_pb_blurb {
     display: -webkit-flexbox;
     display: -ms-flexbox;
     display: flex;
     flex-basis: 33.33%; /* make 3 columns on desktop */
     padding: 4em 3em;
     overflow: hidden;
     margin: 0 !important;
     align-items: center;
     min-height: 14rem; /* might need adjusting */
}
 @media only screen and (max-width: 767px) {
     .blurb-slider-row .et_pb_blurb {
         flex-basis: 100%; /* make 1 column on mobile */
    }
     .sliding-blurb:not(:nth-last-child(-n+1)) {
         border-bottom: 1px solid rgba(0,0,0, 0.2);
    }
}
 @media only screen and (min-width: 768px) and (max-width: 1160px) {
     .blurb-slider-row .et_pb_blurb {
         flex-basis: 50%; /* make 2 columns on tablets and small screens */
    }
     .sliding-blurb:not(:nth-last-child(-n+2)) {
         border-bottom: 1px solid rgba(0,0,0, 0.2);
    }
     .sliding-blurb:not(:nth-child(2n)) {
         border-right: 1px solid rgba(0,0,0, 0.2);
    }
}
 @media only screen and (min-width: 981px) {
     .sliding-blurb h4.et_pb_module_header, .sliding-blurb .et_pb_main_blurb_image {
         position: relative;
         left: 0;
         -webkit-transition: left .3s ease;
         -ms-transition: left .3s ease;
         transition: left .3s ease;
    }
     .sliding-blurb:hover h4.et_pb_module_header {
         left: -120%;
    }
     .sliding-blurb .et_pb_blurb_description {
         position: absolute;
         margin-top: -4rem;
         left: 120%;
         display: block;
         width: 100%;
         height: 100%;
         padding: 0;
         -webkit-transition: left .3s ease;
         -ms-transition: left .3s ease;
         transition: left .3s ease;
    }
     .sliding-blurb:hover .et_pb_blurb_description {
         left: 0;
    }
}
 @media only screen and (min-width: 1161px) {
     .sliding-blurb:not(:nth-last-child(-n+3)) {
         border-bottom: 1px solid rgba(0,0,0, 0.2);
    }
     .sliding-blurb:not(:nth-child(3n)) {
         border-right: 1px solid rgba(0,0,0, 0.2);
    }
}
/*** YOU ONLY NEED BELOW CODE IF USING AN IMAGE OR ICON ***/
 .blurbs-with-image-row .sliding-blurb {
     align-items: flex-start;
}
 @media only screen and (min-width: 981px) {
     .blurbs-with-image-row .sliding-blurb .et_pb_blurb_description {
         margin-top: 0;
         top: 50%; /* might need adjusting */
    }
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.