Hover Effects

Below we show just 4 of the 20+ hover effect panel styles available. Scroll down to the carousel at the bottom of this page to view more.

Show me how to add and style hover effect cards.

NOTE: Some of the hover effects require the addition of CSS coding to display at their best and we have provided CSS coding required for these styles below. Any styles not mentioned will plug and play nicely.

Show me how to enter CSS coding.

Apollo

CSS coding required for Apollo hover effect.

.effect-apollo figcaption h2 {text-align: center;}

Julia

CSS coding required for Julia hover effect.

figure.effect-julia p {-webkit-transform: translate3d(-400px,0,0); transform: translate3d(-400px,0,0); 
background: rgba(255,255,255,0.5);}
.effect-julia figcaption h2 {text-align: center;}

Layla

CSS coding required for Layla hover effect.

figure.effect-layla img { height: 120%;}

Lexi

CSS coding required for Lexi hover effect.

figure.effect-lexi figcaption::before {width: 90%; height: 90%;}
figure.effect-lexi p {width: 50%;}

Lily

CSS coding required for Lily hover effect.

.effect-lily figcaption {left: 5%!important; width: 90%!important;}

Ming

CSS coding required for Ming hover effect.

figure.effect-ming p {padding: 2em;}

Sarah

CSS coding required for Sarah hover effect.

figure.effect-sarah figcaption {max-width: 95%; max-height: 95%; text-align: center;}

Steve

CSS coding required for Steve hover effect.

figure.effect-steve p {color: #2d434e!important}

Hover Effects 1

View Lily, Sadie, Roxy & Bubba hover effects

Hover Effects 2

View Romeo, Oscar, Marley & Ruby hover effects

Hover Effects 3

View Milo, Dexter, Sarah & Chico hover effects

Hover Effects 4

View Julia, Goliath, Selena & Apollo hover effects

Hover Effects 5

View Steve, Moses, Jazz & Ming hover effects

Hover Effects 6

View Lexi, Duke & Layla hover effects