Criando efeito “hover” no widget de “ícone + texto” do Elementor - Bruno Devx - BR Criativus

post #2382

Criando efeito “hover” no widget de “ícone + texto” do Elementor

Publicado em: 31/01/2023 / Atualizado em: 31/01/2023

Categorias: BlogCSSElementorWordpress

Aprenda neste artigo a criar o efeito “hover” no widget de “ícone + texto” do Elementor.

Naturalmente este widget do Elementor, que trás o recurso de ícone + texto, não tem um bom tratamento de hover, por conta disso, neste post, vou lhe ensinar da maneira mais pratica a criar este efeito.

Veja o exemplo abaixo:

Box normal
Box hover

Código do CSS personalizado:

selector svg g#hover {
    display: none;
}

selector:hover svg g#hover {
    display: block;
}

selector:hover svg g#normal {
    display: none;
}

selector {
    transition: linear .2s all;
}

selector:hover {
    background: #BA0060;
    color: #fff;
    transition: linear .2s all;
}

selector > div {
    height: 160px;
}

Espero que este artigo tenha lhe ajudado! até mais.

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=2382

ID de Referência: 2382

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato