This effect can be achieved with CSS only, no JavaScript is required here.

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

As usual, a special class is required to make it work. So select the widget and add a class "enlarge-on-hover" in the widget settings.

Once it is done, paste the following CSS rules to custom styles bookmark:

.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, please find more information here.

Did this answer your question?