Działanie efektu można zobaczyć na przykładowym landingu.

Taki efekt nie wymaga stosowania JavaScript. Można go osiągnąć za pomocą samego CSS.

Każdy element, na którym ma działać ten efekt, musi mieć nadaną klasę “enlarge-on-hover”, którą dodaje się w opcjach widgetu, po prawej stronie edytora.

Następnie, należy dodać poniższy kod css:

.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);
}


Jeżeli nie wiesz jak dodać kod CSS do landinga, zajrzyj tutaj.

Did this answer your question?