Enlarge images on hover

Last updated: April 12, 2021 Written by: Avatar Justyna
share
Table of contents
share
Table of contents

Enlarging images only when you hover your mouse over them draws attention to the widget. In Landingi, you can add the effect to your landing page with a custom CSS code. 

Add a custom CSS code

1. Log in to your Landingi account and go to the editor of your landing page. 

2. Click on a widget and add a class – enlarge-on-hover, in the right-side toolbar.

hover class

3. Go to the Page Settings and click on Custom CSS. If you are not sure how to add custom CSS, you can find more information here.

4. Paste the following CSS code 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);
}

enlarge on hover css

5. Save and close. Publish your landing page and check if the enlarge-on-hover effect works correctly.

share

Was this manual helpful?