No meu portfólio eu uso o tema Impreza, que foi o primeiro tema com que trabalhei. Como o portfólio é bem simples, o tema atende bem e não mudei para o Divi ainda. Esse tema tem um efeito que eu achei bem interessante e não sabia como fazer: quando se usa um ícone, dá para definir um background padrão e um background diferente em hover. Até aí nada de mais. Só que a maneira como o background se transforma, de cima para baixo e não mudando o tom até chegar na nova cor, é que achei interessante.
Fui ver como é feito e, na verdade o que existe é um pseudo-elemento com altura 0 que tem background diferente e o que transforma em hover é a altura dele. Então resolvi recriar aqui. Fiz com o ícone de um módulo de sinopse e depois com um ícone de código, caso em algum momento queira usar um ícone que não seja nativo do Divi.
Com o módulo de Sinopse
Tive que mudar algumas coisas para que funcionasse nó módulo de sinopse, como colocar algumas de suas divs com posição relativa. Além disso, apesar do ícone ter um background, não é possível selecionar a opção de circular ícone, pois ela coloca o background diretamente no ícone e o background precisa sem em um nível acima. Também não dá para selecionar a opção de mudar a cor do ícone em hover direto no módulo se não for usar as opções de texto, pois o ícone muda de cor quando a blurb está hover, então muda muito antes de chegar com o mouse perto do ícone. Aqui abaixo está a blurb e o código que usei para conseguir o efeito. O módulo tem a id definida como “blurb-transform”.
#blurb-transform .et_pb_image_wrap {
position: relative;
border-radius: 100%;
overflow: hidden;
background: #333333;
}
#blurb-transform .et_pb_image_wrap:before {
display: block;
content: '';
position: absolute;
background: #c87c81;
top: 0;
left: 0;
height: 0;
width: 100%;
transition: height 0.3s;
}
#blurb-transform .et_pb_main_blurb_image:hover .et_pb_image_wrap:before {
height: 100%;
}
#blurb-transform .et-pb-icon {
position: relative;
padding: 25px;
z-index: 1;
}
#blurb-transform .et_pb_main_blurb_image:hover .et-pb-icon {
color: #ffffff;
transition: color 0.3s;
}Com o módulo de Código
É basicamente a mesma coisa que com o módulo de sinopse, mas tem que acrescentar, além do html, uma ou outra propriedade que já vem pré-definida na sinopse. Como o Divi tem poucos ícones e muitas vezes uso o Font Awesome, essa é uma solução que permite essa flexibilidade. Segue o resultado e o código.
<div id="icone-transform">
<div class="icone-geral">
<div class="icone-wrap">
<span class="icone-proprio et-waypoint et_pb_animation_top et-pb-icon et-animated"></span>
</div>
</div>
</div>
<style>
#icone-transform {
text-align: center;
}
#icone-transform .icone-geral {
display: inline-block;
}
#icone-transform .icone-wrap {
position: relative;
border-radius: 100%;
overflow: hidden;
background: #333333;
}
#icone-transform .icone-wrap:before {
display: block;
content: '';
position: absolute;
background: #c87c81;
top: 0;
left: 0;
height: 0;
width: 100%;
transition: height 0.3s;
}
#icone-transform .icone-geral:hover .icone-wrap:before {
height: 100%;
}
#icone-transform .icone-proprio {
position: relative;
padding: 25px;
z-index: 1;
font-size: 56px;
color: #c87c81;
}
#icone-transform .icone-geral:hover .icone-proprio {
color: #ffffff;
transition: color 0.3s;
}
</style>
