Peyman Etedali Peyman Etedali - 3 months ago 13
CSS Question

How to change text with hover a effect

i have here a nice glitch effect with an hover effect over the text. So far is everything working but i stucked a lil bit with it to change the text when someone is using the hover effect.

At the moment it will show a glitch effect but still with the word Pulse. what i was trying to do, is to show the words "coming soon" if someone goes with the mouse over the word pulse. I tried the

:before
and
:after
elements but it didn't worked for me. Hope ya could help me out.

HTML

<a href="#" target="_blank" class="glitch-btn">
<div class="label">PULSE</div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div></a>


i created a js fiddle, cause the css is pretty long to post it here

js fiddle

Answer
.glitch-btn:hover .label {
  opacity: 0 !important;
}
Comments