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
[css]
/*** 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 */
}
}
[/css]
0 Comments