Want to showcase your services or products in an engaging way on your DIVI website? This CSS snippet will help you create a card-style layout for content sections, complete with hover animations to make each card stand out. Follow this guide to add a touch of interactivity and style to your content presentation.

.divi-custom-card {

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

    transition: 0.3s;

    border-radius: 5px; /* Rounded corners */

}

.divi-custom-card:hover {

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);

}

.divi-custom-card img {

    border-radius: 5px 5px 0 0;

    width: 100%;

    height: auto;

}

.divi-custom-card-container {

    padding: 2px 16px;

}{codeBox}

Breaking Down the Code:


.divi-custom-card: Styles the individual card with shadow, transition effects, and rounded corners.

.divi-custom-card:hover: Enhances the shadow effect on hover to create a lifting impression.

.divi-custom-card img: Styles the images within the cards, ensuring they are responsive and fit the rounded corners of the card.

.divi-custom-card-container: Adds padding inside each card for content spacing.


Implementation Steps:


Accessing the DIVI Theme Options: From your WordPress dashboard, select "Divi" and then "Theme Options."

Accessing the Custom CSS Box: Look for the "Custom CSS" box under the "General" tab.

Adding the Code: Copy and paste this CSS snippet into the "Custom CSS" box.

Save Changes: Click on "Save Changes" to apply the new card-style layout to your content sections.
Result:

Your DIVI website will now feature a stylish card-style layout for content sections, with appealing hover animations that add depth and interactivity. This layout is perfect for highlighting key services, products, or features in a visually engaging manner.

Experiment with these CSS techniques to create a unique and dynamic presentation of your content on your DIVI site.