Setting enlarge on hover

Last updated: July 29, 2020 Written by: Avatar Justyna
share
Table of contents
share
Table of contents

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.

share

Was this manual helpful?