Text Hover

 

Lien d’origine: https://codepen.io/argyleink/pen/poEjvpd

HTML wordpress :

<section class="texthover1 ">
<div class="container">
<div class="columns">
<div class=textfx>
<div class="item">
<center><h1 class="title is-1"><span class="is-size-2 is-uppercase"><a href="<?= get_category_link(1) ?>">Hover bande bleu</a></span></h1></center>
</div>
</div>
</div>
</div>
</section>

CSS :

.texthover1 .textfx .item h1::before { 
transform: scaleX(0);
transform-origin: bottom right;
}
.texthover1 .textfx .item h1:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.texthover1 .textfx .item h1::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(200 100% 80%); /* couleur de la bande */
z-index: -1;
transition: transform .3s ease;
}
.texthover1 .textfx .item h1 {
position: relative;
font-size: 5rem;
}
.texthover1 .textfx .item h1::after{
content: " ";
display: block;
position: absolute;
width: 100%;
height: 3px;
background: rgb(0, 0, 0); /* couleur de la ligne */
transform: scale(0);
transition: transform 0.2s ease-in-out;
}
.texthover1 .textfx .item h1:hover::after{
transform: scale(1);
}