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; }