Skip to main content

Hello

Trying to find out how to create the shadow/movement effect similar to the “pricing cards” on this page.

http://unbouncepages.com/gradient-simple-hero/


What’s the best way to go about it?

Figured it out with CSS. I also wanted it to grow slightly.



#lp-pom-box-245:hover
{box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05), 0 0 15px 0 rgba(0, 0, 0, 0.25);
transition: 0.3s ease;}

#lp-pom-box-245 {
padding: 0px;
background-color: #fff;
transition: transform .2s; /* Animation */
margin: 0 auto;
}

#lp-pom-box-245:hover
{transform: scale(1.03); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

Reply


Terms & ConditionsCookie settings