Como usar o Hover Slider para mostrar outro conjunto de elementos ao passar o mouse

O Hover Slider é um elemento com um slide que aparece quando você passa o mouse em um grupo por algum tempo sem clicar. Ele adiciona interação a Grupos e Células de Grade, pois você pode mostrar diferentes conjuntos de Elementos para estados normais e de mouse. Para adicionar o slide flutuante, selecione um grupo. Modifique as propriedades necessárias na seção Hover Slide do Property Panel.
Controle deslizante

Navegue por categorias de recursos

Efeito de desvanecimento do controle deslizante de foco

Qualquer Biblioteca de Animação começa com Fade. O Hover Slider também possui o Fade Preset, que você pode adicionar para a transição do slide padrão do Hover para o Hover Slider. Você pode modificar as propriedades de fade no painel de propriedades, clique no link Hover Slide. Você também pode adicionar o Hover Slider como um elemento no menu Adicionar.

Passe o cursor sobre o efeito

O Hover Slider geralmente mostra os diferentes elementos em Hover. Você pode adicionar o Efeito Slide Over se for ao Painel de Propriedades e editar as propriedades do Deslizamento deslizante para o Grupo selecionado. Você adiciona o elemento Hover Slider do menu Add. Você também pode modificar a Direção e a Duração, se necessário.

Efeito de slides deslizantes

O efeito de slide para o controle deslizante Hover mostra o movimento natural do slide que adiciona interação ao vivo ao seu design. Aplique o efeito Slide para o elemento Hover Slider nas propriedades Hover Slider. Teste selecionando o Hover Slider no Editor e passando o mouse sobre o elemento.

Efeito de inversão do controle deslizante de passar o mouse

A inversão também causa um impacto interessante na interação nas páginas da web. Usar o efeito Flip no Hover pode atrair a atenção e impressionar seus visitantes. Para definir o efeito Flip para o Hover Slider, vá para a seção Hover Slider do painel de propriedades e selecione o Flip Preset.

Efeito de oscilação do controle deslizante deslizante

Você pode atrair a atenção do visitante do seu site pelo Efeito Wobble usado para o Hover Slider. Para usar o efeito, vá para o link Hover Slider do painel de propriedades e selecione o Wobble Preset. Além disso, você pode ajustar Transparência, Duração e Direção.

Efeito de zoom do controle deslizante de foco

O zoom também é muito natural, pois estamos vivendo o ouvido das câmeras em todos os lugares, e você pode usar o Efeito Zoom no Hover Slider. Vá para o painel de propriedades e escolha a predefinição de zoom para o elemento deslizante deslizante. Modifique suas propriedades, se necessário.

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.