Comment utiliser le curseur de survol pour afficher d'autres éléments définis en survol

Le Hover Slider est un élément avec une diapositive apparaissant lorsque vous passez la souris sur un groupe pendant un certain temps sans cliquer. Il ajoute une interaction aux groupes et aux cellules de la grille car vous pouvez afficher différents ensembles d'éléments pour les états normaux et au survol de la souris. Pour ajouter le Hover Slide, sélectionnez un groupe. Modifiez les propriétés nécessaires dans la section Hover Slide du panneau de propriétés.
Curseur de survol

Parcourir par catégories de fonctionnalités

Effet de fondu du curseur de survol

Toute bibliothèque d'animation commence par Fade. Le Hover Slider a également le Fade Preset, que vous pouvez ajouter pour la transition de la diapositive par défaut du Hover au Hover Slider. Vous pouvez modifier les propriétés Fade dans le panneau de propriétés, cliquez sur le lien Hover Slide. Vous pouvez également ajouter le curseur de survol en tant qu'élément à partir du menu Ajouter.

Passez le curseur sur l'effet

Le curseur Hover montre généralement les différents éléments sur Hover. Vous pouvez ajouter l'effet Slide Over si vous accédez au panneau de propriétés et modifiez les propriétés du curseur Hover pour le groupe sélectionné. Vous ajoutez l'élément Hover Slider à partir du menu Ajouter. Vous pouvez également modifier la direction et la durée si nécessaire.

Effet de diapositive de curseur de survol

L'effet de diapositive pour le curseur Hover montre le mouvement de diapositive naturel qui ajoute une interaction en direct à votre conception. Appliquez l'effet de glissement pour l'élément Hover Slider dans les propriétés Hover Slider. Testez en sélectionnant le curseur de survol dans l'éditeur et en survolant l'élément.

Effet de retournement du curseur de survol

Le retournement a également un impact intéressant sur l'interaction sur les pages Web. L'utilisation de l'effet Flip sur le survol peut attirer l'attention et épater vos visiteurs. Pour définir l'effet de retournement du curseur de survol, accédez à la section du curseur de survol du panneau de propriétés et sélectionnez le préréglage de retournement.

Effet d'oscillation du curseur de survol

Vous pouvez attirer l'attention du visiteur de votre site Web grâce à l'effet Wobble utilisé pour le Hover Slider. Pour utiliser l'effet, accédez au lien du curseur de survol du panneau de propriétés et sélectionnez le préréglage Wobble. De plus, vous pouvez ajuster la transparence, la durée et la direction.

Effet de zoom du curseur de survol

Le zoom est également très naturel, car nous vivons partout à l'oreille des caméras, et vous pouvez utiliser l'effet de zoom sur le curseur Hover. Accédez au panneau de propriétés et choisissez le préréglage de zoom pour l'élément de curseur de survol. Modifiez ses propriétés si nécessaire.

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.