Standard Divi CTA
This is a standard Divi Call to Action Module styled with a blue background and dark red button.
CSS Class: none
TRG CTA Card
To make the entire card clickable, we’ve made button transparent and resized it to cover the entire card. The opaque hover effect makes it apparent that the card is clickable.
CSS Class: trg-cta-card
TRG CTA Card - Hover Grow
When someone hovers over the card, the card grows and casts a shadow.
CSS Class: trg-cta-card hover-grow
TRG CTA Card - Hover Shrink
When someone hovers over the card, the card shrinks to reveal a shadow.
CSS Class: trg-cta-card hover-shrink
TRG CTA Card - Hover Background
Hovering over this card makes the background color change.
CSS Class: trg-cta-card hover-background
TRG CTA Card - Hover Border
Hovering over this card makes the border color change.
CSS Class: trg-cta-card hover-border
Title on Top
This card has the title element relocated to the bottom of the card.
CSS Class: trg-cta-card cta-title-top
Title on Bottom
This card has the title element relocated to the bottom of the card.
CSS Class: trg-cta-card cta-title-bottom
Title on Left
This card has the title element relocated to the left suspended a bit off the bottom.
CSS Class: trg-cta-card cta-title-left
CSS Class: trg-cta-card trg-overlay-container
CSS Class: trg-cta-card trg-overlay-container overlay-button
Hover Description
When you hover on this card, the description appears.
CSS Class: trg-cta-card hover-description
Polaroid Style
This card is styled to look like a Polaroid photograph.
CSS Class: trg-cta-card trg-wrap cta-polaroid
Hover Zoom In Background
When you hover over this card, the background slowly zooms.
CSS Class: trg-cta-card trg-wrap hover-zoom-in-bg
Hover Zoom Out Background
When you hover over this card, the background slowly zooms.
CSS Class: trg-cta-card trg-wrap hover-zoom-out-bg
Hover Sharpen Background
The background on this card is a bit blurred. When you hover, the background comes into focus.
CSS Class: trg-cta-card trg-wrap hover-sharpen-bg
Hover Color Background
The background on this card is black and white. When you hover, the background turns to color.
CSS Class: trg-cta-card trg-wrap hover-color-bg
On-Click Spinner
Then the card is clicked an AJAX-style spinner is displayed until the next page loads.
CSS Class: trg-cta-card trg-spinner
Combo #1
This card combines the Title on Bottom, Hover Zoom In Background and Spinner features.
CSS Class: trg-cta-card trg-wrap hover-color-bg
Combo #2
This card combines, the Title on Left, Hover Sharpen Background, and Hover Description features.
CSS Class: trg-cta-card trg-wrap hover-sharpen-bg cta-title-left hover-description
Combo #3
This card merges the Hover Background and Spinner features.
CSS Class: trg-cta-card hover-background trg-spinner
Divi CTA Cards
Extend Divi Call To Action modules by adding: Hover effects (5), Title placement options (3), Overlays (2), Background effects (5), Animations (18) and an AJAX-style spinner.
