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

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:

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.