Style a row of Divi Blurbs to appear as cards/blocks — with a cool animation on hover.
Here is an example video of it in action:
Video 1: https://i.gyazo.com/cde555daaf878bc9257156d2babca838.mp4
Video 2: https://i.gyazo.com/2649e6b5e8a7a3b0410bf277b6885540.mp4
Screenshot 1: https://i.gyazo.com/f6f7979824a90f09bbb254dd0077c5b0.png
Screenshot 2: https://i.gyazo.com/fba4c36a181cdf6bd4c9fa17de6323a6.png
The code below will override all blurbs to have the cool hover effect. But if you specifically use the .blurb-row class on a Row module, it will also give them the card styling too — which basically adds:
- some padding
- white background
- shadow
- ensures the blurbs are all the same height, within the row
In addition to adding the .blurb-row class to the Row module, you will also probably want to set:
- Customer Gutter Width: 1
- Equalize Column Heights
/* -- BLURBS -- */ .et_pb_section .et_pb_row.blurb-row { overflow: visible; } .et_pb_section .et_pb_row.blurb-row .et_pb_column { display: flex; } .et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb { flex-grow: 1; padding: 30px; -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06); transition: all 0.4s ease-in-out; background-color: white; position: relative; } @media (max-width: 980px) { .et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb { margin-bottom: 30px !important; } } .et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb:hover { -webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.12); -moz-box-shadow: 0 15px 20px rgba(0,0,0,0.12); box-shadow: 0 15px 20px rgba(0,0,0,0.12); -webkit-transform: translate(0, -4px); transform: translate(0, -4px); background-color: rgba(255,255,255,0.95); z-index: 1; } .et_pb_blurb .et-pb-icon { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.3; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .et_pb_blurb:not(:hover) .et-pb-icon { color: #c29445 !important; } .et_pb_blurb:hover .et-pb-icon { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 1; } .et_pb_blurb:hover h4 { color: #c29445; } .et_pb_main_blurb_image { margin-bottom: 1em !important; } .et_pb_blurb .et-pb-icon { font-size: 56px; } .et_pb_blurb h4 { padding-bottom: 1em !important; } /* if blurb has icon on top, and is left aligned, then also left align the image/icon too */ .et_pb_blurb.et_pb_text_align_left.et_pb_blurb_position_top .et_pb_main_blurb_image { text-align: left; } /* -- END BLURBS -- */