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);
}
Menu hover fill text
Lien d’origine: https://codepen.io/alphardex/pen/QWwveZG
HTML:
<section class="menuHoverFillText"> <ul> <li><a href="#">home</a></li> <li><a href="#">archives</a></li> <li><a href="#">tags</a></li> <li><a href="#">categories</a></li> <li><a href="#">about</a></li> </ul> </section>
CSS:
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
.menuHoverFillText {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #1A1E23;
}
.menuHoverFillText ul {
display: flex;
flex-direction: column;
align-items: start;
list-style-type: none;
}
.menuHoverFillText ul li {
padding: 6px 0;
}
.menuHoverFillText ul li a {
--fill-color: #198CE6;
position: relative;
display: block;
padding: 4px 0;
font: 700 3rem Raleway, sans-serif;
text-decoration: none;
text-transform: uppercase;
-webkit-text-stroke: 2px var(--fill-color);
background: linear-gradient(var(--fill-color) 0 100%) left/0 no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: 0.5s linear;
}
.menuHoverFillText ul li a:hover {
background-size: 100%;
}
Layered text-shadow effect
Lien d’origine: https://codepen.io/TajShireen/pen/abzmoRE
HTML:
<section class="layeredTextShadow"> <div>Roses</div> </section>
CSS:
.layeredTextShadow div{
font-size: 15rem;
text-align: center;
height:90vh;
line-height: 90vh;
color: #fcedd8;
background: #d52e3f;
font-family: 'Niconne', cursive;
font-weight: 700;
text-shadow: 5px 5px 0px #eb452b,
10px 10px 0px #efa032,
15px 15px 0px #46b59b,
20px 20px 0px #017e7f,
25px 25px 0px #052939,
30px 30px 0px #c11a2b,
35px 35px 0px #c11a2b,
40px 40px 0px #c11a2b,
45px 45px 0px #c11a2b;
}