Jak używać suwaka najechania kursorem, aby pokazać inny element ustawiony po najechaniu myszą

Suwak Hover to element ze slajdem pojawiającym się po najechaniu myszą na grupę przez jakiś czas bez klikania. Dodaje interakcję do grup i komórek siatki, ponieważ możesz wyświetlać różne zestawy elementów dla stanów normalnych i po najechaniu myszą. Aby dodać slajd, wybierz grupę. Zmodyfikuj wymagane właściwości w sekcji Slajd w panelu Właściwości.
Aktywuj suwak

Przeglądaj według kategorii funkcji

Efekt zanikania suwaka po najechaniu kursorem

Każda biblioteka animacji zaczyna się od Fade. Hover Slider ma również Fade Preset, które możesz dodać do przejścia z domyślnego slajdu Hover do Hover Slider. Możesz modyfikować właściwości zanikania w panelu właściwości, kliknij łącze Aktywuj slajd. Możesz także dodać suwak jako element z menu Dodaj.

Umieść suwak nad efektem

Suwak najechania zwykle pokazuje różne elementy po najechaniu kursorem. Możesz dodać efekt Slide Over, jeśli przejdziesz do panelu właściwości i edytujesz właściwości suwaka dla wybranej grupy. Dodajesz element Hover Slider z menu Dodaj. W razie potrzeby możesz również zmodyfikować Kierunek i Czas trwania.

Efekt slajdu kursora

Efekt slajdu dla suwaka unoszącego się pokazuje naturalny ruch slajdu, który dodaje do projektu interakcję na żywo. Zastosuj efekt slajdu dla elementu Hover Slider we właściwościach Hover Slider. Przetestuj, wybierając suwak w edytorze i unosząc element.

Efekt odwracania suwaka najechania

Flipping ma również ciekawy wpływ na interakcję na stronach internetowych. Korzystanie z efektu Flip po najechaniu kursorem może przyciągnąć uwagę i zadziwić odwiedzających. Aby ustawić efekt odwracania dla suwaka najechania, przejdź do sekcji Suwak najechania na panelu Właściwości i wybierz ustawienie wstępne odwracania.

Efekt chybotania suwaka unoszącego się

Możesz przyciągnąć uwagę odwiedzających witrynę dzięki efektowi chybotania używanemu w suwaku najechania. Aby użyć efektu, przejdź do linku Hover Slider w panelu właściwości i wybierz ustawienie Wobble. Dodatkowo możesz dostosować przezroczystość, czas trwania i kierunek.

Efekt powiększenia suwaka po najechaniu kursorem

Zoomowanie jest również bardzo naturalne, ponieważ wszędzie żyjemy uchem kamer i możesz użyć efektu powiększenia na suwaku Hover. Przejdź do panelu właściwości i wybierz ustawienie wstępne powiększenia dla elementu przesuwanego suwaka. W razie potrzeby zmodyfikuj jego właściwości.

How To Create The Hover Slider For A Group Of Elements

Our hover slider animation can also be referred to as a hover box slider. It sets the hover box animation for the whole group of elements, making the structure more laconic and homogeneous. It is mostly used as the image hover effect, particularly for gallery groups. When the visitor hovers over one of the elements, the hover box with content description text or heart or like icon appears. This image hover effect slider for the group of elements is very popular within social media and platforms, implying interaction with the users using the hover box as a basic unit.

Similar to other stunning hover effects, our slider hover box widget built into the property panel can customize the image hover effect slider however you want. To add the box hover slider, you need to know how the slider animation hover box will present your content after using the image hover effect for boxes. Our site creator will immediately reflect all slider image hover effects and box cards hover effects in the groups after applying them. For example, you will instantly see how the image hover box slider sets it in motion after you add the title.

Some developers may think it is similar to Elementor page builder image hover effects and that using hover effects of the Elementor page builder is simpler. However, it is not. Unlike the Elementor page builder that can change the background image hover effect for only one element, our creator applies the image hover effect slider for all elements within the group. To learn how to create a responsive webpage group more attractive than the Elementor page builder effect on hover over, use our additional materials templates, or experiment yourself for free.