Dynamiczne powiększenie widgetu

Zaktualizowano: 9 lipca, 2020 Autor: Avatar Justyna
share
Spis treści
share
Spis treści

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.

share

Czy ta instrukcja była pomocna?