Hur man använder Hover Slider för att visa andra element inställda på hovring

Hover Slider är ett element med en bild som visas när du håller musen över en grupp under en tid utan att klicka. Det lägger till interaktion till grupper och rutnätsceller eftersom du kan visa olika uppsättningar av element för normala tillstånd och mus-svävartillstånd. För att lägga till svävarbilden, välj en grupp. Ändra de nödvändiga egenskaperna i avsnittet Hover Slide på egenskapspanelen.
Hover skjutreglaget

Browse By Feature Categories

Hover Slider Fade Effect

Alla animationsbibliotek börjar med Tona. Hover Slider har också Fade Preset, som du kan lägga till för övergången från standardbilden för Hover till Hover Slider. Du kan ändra egenskaperna för Tona i egenskapspanelen, klicka på länken Hover Slide. Du kan också lägga till Hover Slider som ett element från Lägg till-menyn.

Hover skjutreglaget över effekt

Hover Slider visar vanligtvis de olika elementen på Hover. Du kan lägga till Slide Over-effekten om du går till egenskapspanelen och redigerar Slider-egenskaperna för den valda gruppen. Du lägger till Hover Slider Element från Add-menyn. Du kan också ändra riktning och varaktighet om det behövs.

Hover Slider Slide Effect

Slide-effekten för Hover Slider visar den naturliga skjutrörelsen som lägger till liveinteraktion till din design. Använd glideffekten för skjutreglageelementet för svävaren i egenskaperna för skjutreglaget. Testa genom att välja skjutreglaget för muspekaren i redigeraren och föra muspekaren över elementet.

Hover Slider Flip Effect

Vändning har också en intressant inverkan på interaktion på webbsidor. Att använda Flip Effect på svävaren kan väcka uppmärksamhet och imponera dina besökare. För att ställa in vändningseffekten för svävreglaget, gå till egenskapspanelens sektionsreglage för svävaren och välj vändningsförinställningen.

Hover Slider Wobble Effect

Du kan locka din webbplatsbesökares uppmärksamhet med Wobble-effekten som används för Hover Slider. För att använda effekten, gå till egenskapspanelens Hover Slider-länk och välj Wobble Preset. Dessutom kan du finjustera transparens, varaktighet och riktning.

Hover Slider Zoom Effect

Zoomning är också väldigt naturligt, eftersom vi lever med kameror överallt, och du kan använda zoomeffekten på skjutreglaget för svävaren. Gå till egenskapspanelen och välj zoomförinställningen för skjutreglageelementet. Ändra dess egenskaper om det behövs.

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.