Enlarge on hover

15.03.2019

You can achieve the effect of enlargement when the user mouse over a chosen element of your landing page. This can be done with CSS only.

You can see how it looks on this example landing page.

How to settle enlarge on hover effect?

1. Select the widget which you want to be enlarged and add to it a class ‘enlarge-on-hover’ in the widget settings.

2. Go to the Page Settings -> Custom CSS and paste the following CSS rules into the Add custom styles field.

.enlarge-on-hover {
    webkit-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.25);
    -o-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.25);
    -ms-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.25);
    -webkit-transition: ease-in-out 0.2s;
    -moz-transition: ease-in-out 0.2s;
    -o-transition: ease-in-out 0.2s;
    -ms-transition: ease-in-out 0.2s;
    transition: ease-in-out 0.2s;
}

.enlarge-on-hover:hover {
    webkit-box-shadow: 0px 15px 65px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 15px 65px 0px rgba(0,0,0,0.35);
    -o-box-shadow: 0px 15px 65px 0px rgba(0,0,0,0.35);
    -ms-box-shadow: 0px 15px 65px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 15px 65px 0px rgba(0,0,0,0.35);
    transform: scale(1.015);
}

If you are not sure how to do it, you can find more information here.

Was this article helpful?

You might also check:

custom CSS landing page edition

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.