Hover effects

muskokagraphics · November 13

On some items you feature on the website, you show some hover effects on the pricing boxes.

https://muffingroup.com/betheme/elements/pricing-item/

For the life of me I cannot seem to find a way to replicate this hover effect. I assume it's not done with custom CSS simply because you're website is showing how things would look without added code to your be buider.

Phil · November 13

Hi,

To achieve the effect shown in an example, use the Transform on hover:

Best regards

muskokagraphics · November 13

Thanks I do see how that can move the item But they have a drop shadow also appear on hover....

Phil · November 14

The box-shadow must be done with a custom CSS code.

If you send a link to your website, I can help you prepare it.

Best regards

muskokagraphics · November 14

I have to rebuild my website and I'm taking my time with it. Can be found here

https://www.markwigston.com/

Phil · November 14

Use this CSS code:

.pricing-box-box:hover{
 box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2)!important;
}
.pricing-box-box{
 transition: .3s;
}

Also, edit these elements and set the Overflow option to Default.

Best regards

muskokagraphics · November 14

That worked thanks! Should be added to the builder!

Hover effects

Comments