Dynamiczne powiększenie widgetu

26.01.2019

Chcesz uzyskać efekt powiększenia wybranego elementu na landingu (enlarge on hover) po najechaniu na niego kursorem? Możesz to łatwo zrobić poprzez dodanie własnego kodu CSS. Działanie tego efektu możesz zobaczyć na przykładowym landingu.

Jak dodać efekt powiększenia widgetu?

1. W edytorze zaznacz widget, który chcesz powiększyć; przejdź do opcji widgetu po prawej stronie edytora i nadaj temu widgetowi klasę “enlarge-on-hover”.

2. Następnie wybierz Ustawienia strony -> Własny CSS i w polu dodaj własne style wklej 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.

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.