javascript - por - Cómo cambiar el texto con el mouse sobre un efecto

pasar el mouse por la imagen y dar informacion html

Question

Tengo aquí un bonito efecto de falla con un efecto de desplazamiento sobre el texto. Hasta el momento todo está funcionando, pero trabajé un poquito para cambiar el texto cuando alguien usa el efecto de desplazamiento.

Por el momento, mostrará un efecto de falla, pero aún con la palabra Pulso. Lo que estaba tratando de hacer es mostrar las palabras "próximamente" si alguien pasa el mouse sobre el pulso de palabra. Probé los elementos :before y :after , pero no funcionó para mí. Espero que puedas ayudarme.

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>

Creé un violín js, porque el CSS es bastante largo para publicarlo aquí

js violín

Answer 1

Intenta usar este fragmento de código

$(".label").hover( function() {
$(this).hide();
}, function() {
$(".mask").show();
}); 

Answer 2

simplemente establece la opacity a 0 en el .glitch-btn:hover .label para .glitch-btn:hover .label

MANIFESTACIÓN

.glitch-btn:hover .label {
opacity: 0 !important;
}
@-webkit-keyframes jitter-20-20-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.2px,.1px);transform:translate(.2px,.1px)}90%{-webkit-transform:translate(.9px,.3px);transform:translate(.9px,.3px)}85%{-webkit-transform:translate(-.3px,0);transform:translate(-.3px,0)}80%{-webkit-transform:translate(.4px,0);transform:translate(.4px,0)}75%{-webkit-transform:translate(-2px,1px);transform:translate(-2px,1px)}70%{-webkit-transform:translate(-.6px,.3px);transform:translate(-.6px,.3px)}65%{-webkit-transform:translate(2.45px,1.4px);transform:translate(2.45px,1.4px)}60%{-webkit-transform:translate(2.4px,.4px);transform:translate(2.4px,.4px)}55%{-webkit-transform:translate(-.45px,0);transform:translate(-.45px,0)}50%{-webkit-transform:translate(-1.5px,1.5px);transform:translate(-1.5px,1.5px)}45%{-webkit-transform:translate(-4.4px,-1.65px);transform:translate(-4.4px,-1.65px)}40%{-webkit-transform:translate(-4.8px,1.8px);transform:translate(-4.8px,1.8px)}35%{-webkit-transform:translate(2.6px,0);transform:translate(2.6px,0)}30%{-webkit-transform:translate(-5.6px,2.1px);transform:translate(-5.6px,2.1px)}25%{-webkit-transform:translate(5.25px,-1.5px);transform:translate(5.25px,-1.5px)}20%{-webkit-transform:translate(2.4px,-2.4px);transform:translate(2.4px,-2.4px)}15%{-webkit-transform:translate(-4.25px,-2.55px);transform:translate(-4.25px,-2.55px)}10%{-webkit-transform:translate(8.1px,1.8px);transform:translate(8.1px,1.8px)}5%{-webkit-transform:translate(7.6px,1.9px);transform:translate(7.6px,1.9px)}}@keyframes jitter-20-20-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.2px,.1px);transform:translate(.2px,.1px)}90%{-webkit-transform:translate(.9px,.3px);transform:translate(.9px,.3px)}85%{-webkit-transform:translate(-.3px,0);transform:translate(-.3px,0)}80%{-webkit-transform:translate(.4px,0);transform:translate(.4px,0)}75%{-webkit-transform:translate(-2px,1px);transform:translate(-2px,1px)}70%{-webkit-transform:translate(-.6px,.3px);transform:translate(-.6px,.3px)}65%{-webkit-transform:translate(2.45px,1.4px);transform:translate(2.45px,1.4px)}60%{-webkit-transform:translate(2.4px,.4px);transform:translate(2.4px,.4px)}55%{-webkit-transform:translate(-.45px,0);transform:translate(-.45px,0)}50%{-webkit-transform:translate(-1.5px,1.5px);transform:translate(-1.5px,1.5px)}45%{-webkit-transform:translate(-4.4px,-1.65px);transform:translate(-4.4px,-1.65px)}40%{-webkit-transform:translate(-4.8px,1.8px);transform:translate(-4.8px,1.8px)}35%{-webkit-transform:translate(2.6px,0);transform:translate(2.6px,0)}30%{-webkit-transform:translate(-5.6px,2.1px);transform:translate(-5.6px,2.1px)}25%{-webkit-transform:translate(5.25px,-1.5px);transform:translate(5.25px,-1.5px)}20%{-webkit-transform:translate(2.4px,-2.4px);transform:translate(2.4px,-2.4px)}15%{-webkit-transform:translate(-4.25px,-2.55px);transform:translate(-4.25px,-2.55px)}10%{-webkit-transform:translate(8.1px,1.8px);transform:translate(8.1px,1.8px)}5%{-webkit-transform:translate(7.6px,1.9px);transform:translate(7.6px,1.9px)}}@-webkit-keyframes jitter-20-21-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(-.43px,.1px);transform:translate(-.43px,.1px)}90%{-webkit-transform:translate(-.95px,.2px);transform:translate(-.95px,.2px)}85%{-webkit-transform:translate(.08px,.15px);transform:translate(.08px,.15px)}80%{-webkit-transform:translate(.1px,.4px);transform:translate(.1px,.4px)}75%{-webkit-transform:translate(-2.13px,-.75px);transform:translate(-2.13px,-.75px)}70%{-webkit-transform:translate(1.95px,0);transform:translate(1.95px,0)}65%{-webkit-transform:translate(2.63px,.35px);transform:translate(2.63px,.35px)}60%{-webkit-transform:translate(-3.4px,-.8px);transform:translate(-3.4px,-.8px)}55%{-webkit-transform:translate(.68px,.45px);transform:translate(.68px,.45px)}50%{-webkit-transform:translate(4.75px,1.5px);transform:translate(4.75px,1.5px)}45%{-webkit-transform:translate(5.23px,1.65px);transform:translate(5.23px,1.65px)}40%{-webkit-transform:translate(2.7px,-.6px);transform:translate(2.7px,-.6px)}35%{-webkit-transform:translate(.98px,2.6px);transform:translate(.98px,2.6px)}30%{-webkit-transform:translate(-5.95px,2.1px);transform:translate(-5.95px,2.1px)}25%{-webkit-transform:translate(4.88px,1.5px);transform:translate(4.88px,1.5px)}20%{-webkit-transform:translate(-7.6px,-2.4px);transform:translate(-7.6px,-2.4px)}15%{-webkit-transform:translate(-2.13px,2.55px);transform:translate(-2.13px,2.55px)}10%{-webkit-transform:translate(9.45px,.9px);transform:translate(9.45px,.9px)}5%{-webkit-transform:translate(8.07px,-2.85px);transform:translate(8.07px,-2.85px)}}@keyframes jitter-20-21-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(-.43px,.1px);transform:translate(-.43px,.1px)}90%{-webkit-transform:translate(-.95px,.2px);transform:translate(-.95px,.2px)}85%{-webkit-transform:translate(.08px,.15px);transform:translate(.08px,.15px)}80%{-webkit-transform:translate(.1px,.4px);transform:translate(.1px,.4px)}75%{-webkit-transform:translate(-2.13px,-.75px);transform:translate(-2.13px,-.75px)}70%{-webkit-transform:translate(1.95px,0);transform:translate(1.95px,0)}65%{-webkit-transform:translate(2.63px,.35px);transform:translate(2.63px,.35px)}60%{-webkit-transform:translate(-3.4px,-.8px);transform:translate(-3.4px,-.8px)}55%{-webkit-transform:translate(.68px,.45px);transform:translate(.68px,.45px)}50%{-webkit-transform:translate(4.75px,1.5px);transform:translate(4.75px,1.5px)}45%{-webkit-transform:translate(5.23px,1.65px);transform:translate(5.23px,1.65px)}40%{-webkit-transform:translate(2.7px,-.6px);transform:translate(2.7px,-.6px)}35%{-webkit-transform:translate(.98px,2.6px);transform:translate(.98px,2.6px)}30%{-webkit-transform:translate(-5.95px,2.1px);transform:translate(-5.95px,2.1px)}25%{-webkit-transform:translate(4.88px,1.5px);transform:translate(4.88px,1.5px)}20%{-webkit-transform:translate(-7.6px,-2.4px);transform:translate(-7.6px,-2.4px)}15%{-webkit-transform:translate(-2.13px,2.55px);transform:translate(-2.13px,2.55px)}10%{-webkit-transform:translate(9.45px,.9px);transform:translate(9.45px,.9px)}5%{-webkit-transform:translate(8.07px,-2.85px);transform:translate(8.07px,-2.85px)}}@-webkit-keyframes jitter-20-22-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.4px,-.05px);transform:translate(.4px,-.05px)}90%{-webkit-transform:translate(-.5px,-.2px);transform:translate(-.5px,-.2px)}85%{-webkit-transform:translate(.75px,.45px);transform:translate(.75px,.45px)}80%{-webkit-transform:translate(1.4px,.6px);transform:translate(1.4px,.6px)}75%{-webkit-transform:translate(-1.25px,.5px);transform:translate(-1.25px,.5px)}70%{-webkit-transform:translate(2.1px,-.9px);transform:translate(2.1px,-.9px)}65%{-webkit-transform:translate(-2.8px,-.35px);transform:translate(-2.8px,-.35px)}60%{-webkit-transform:translate(1.2px,.8px);transform:translate(1.2px,.8px)}55%{-webkit-transform:translate(-2.25px,.45px);transform:translate(-2.25px,.45px)}50%{-webkit-transform:translate(.5px,0);transform:translate(.5px,0)}45%{-webkit-transform:translate(-2.2px,0);transform:translate(-2.2px,0)}40%{-webkit-transform:translate(4.8px,0);transform:translate(4.8px,0)}35%{-webkit-transform:translate(2.6px,-.65px);transform:translate(2.6px,-.65px)}30%{-webkit-transform:translate(-7px,-2.1px);transform:translate(-7px,-2.1px)}25%{-webkit-transform:translate(-4.5px,0);transform:translate(-4.5px,0)}20%{-webkit-transform:translate(-8px,.8px);transform:translate(-8px,.8px)}15%{-webkit-transform:translate(-.85px,0);transform:translate(-.85px,0)}10%{-webkit-transform:translate(-2.7px,1.8px);transform:translate(-2.7px,1.8px)}5%{-webkit-transform:translate(6.65px,-.95px);transform:translate(6.65px,-.95px)}}@keyframes jitter-20-22-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.4px,-.05px);transform:translate(.4px,-.05px)}90%{-webkit-transform:translate(-.5px,-.2px);transform:translate(-.5px,-.2px)}85%{-webkit-transform:translate(.75px,.45px);transform:translate(.75px,.45px)}80%{-webkit-transform:translate(1.4px,.6px);transform:translate(1.4px,.6px)}75%{-webkit-transform:translate(-1.25px,.5px);transform:translate(-1.25px,.5px)}70%{-webkit-transform:translate(2.1px,-.9px);transform:translate(2.1px,-.9px)}65%{-webkit-transform:translate(-2.8px,-.35px);transform:translate(-2.8px,-.35px)}60%{-webkit-transform:translate(1.2px,.8px);transform:translate(1.2px,.8px)}55%{-webkit-transform:translate(-2.25px,.45px);transform:translate(-2.25px,.45px)}50%{-webkit-transform:translate(.5px,0);transform:translate(.5px,0)}45%{-webkit-transform:translate(-2.2px,0);transform:translate(-2.2px,0)}40%{-webkit-transform:translate(4.8px,0);transform:translate(4.8px,0)}35%{-webkit-transform:translate(2.6px,-.65px);transform:translate(2.6px,-.65px)}30%{-webkit-transform:translate(-7px,-2.1px);transform:translate(-7px,-2.1px)}25%{-webkit-transform:translate(-4.5px,0);transform:translate(-4.5px,0)}20%{-webkit-transform:translate(-8px,.8px);transform:translate(-8px,.8px)}15%{-webkit-transform:translate(-.85px,0);transform:translate(-.85px,0)}10%{-webkit-transform:translate(-2.7px,1.8px);transform:translate(-2.7px,1.8px)}5%{-webkit-transform:translate(6.65px,-.95px);transform:translate(6.65px,-.95px)}}@-webkit-keyframes jitter-20-23-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.08px,.15px);transform:translate(.08px,.15px)}90%{-webkit-transform:translate(-1.05px,.3px);transform:translate(-1.05px,.3px)}85%{-webkit-transform:translate(.08px,.6px);transform:translate(.08px,.6px)}80%{-webkit-transform:translate(-.9px,.6px);transform:translate(-.9px,.6px)}75%{-webkit-transform:translate(-.38px,-.75px);transform:translate(-.38px,-.75px)}70%{-webkit-transform:translate(-2.85px,.3px);transform:translate(-2.85px,.3px)}65%{-webkit-transform:translate(.18px,0);transform:translate(.18px,0)}60%{-webkit-transform:translate(-.6px,.8px);transform:translate(-.6px,.8px)}55%{-webkit-transform:translate(-.68px,-.9px);transform:translate(-.68px,-.9px)}50%{-webkit-transform:translate(-3.25px,1.5px);transform:translate(-3.25px,1.5px)}45%{-webkit-transform:translate(3.03px,.55px);transform:translate(3.03px,.55px)}40%{-webkit-transform:translate(-3.3px,-1.8px);transform:translate(-3.3px,-1.8px)}35%{-webkit-transform:translate(-4.88px,1.95px);transform:translate(-4.88px,1.95px)}30%{-webkit-transform:translate(1.05px,-1.4px);transform:translate(1.05px,-1.4px)}25%{-webkit-transform:translate(1.88px,1.5px);transform:translate(1.88px,1.5px)}20%{-webkit-transform:translate(-6px,2.4px);transform:translate(-6px,2.4px)}15%{-webkit-transform:translate(9.78px,1.7px);transform:translate(9.78px,1.7px)}10%{-webkit-transform:translate(-1.35px,-.9px);transform:translate(-1.35px,-.9px)}5%{-webkit-transform:translate(-9.03px,.95px);transform:translate(-9.03px,.95px)}}@keyframes jitter-20-23-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.08px,.15px);transform:translate(.08px,.15px)}90%{-webkit-transform:translate(-1.05px,.3px);transform:translate(-1.05px,.3px)}85%{-webkit-transform:translate(.08px,.6px);transform:translate(.08px,.6px)}80%{-webkit-transform:translate(-.9px,.6px);transform:translate(-.9px,.6px)}75%{-webkit-transform:translate(-.38px,-.75px);transform:translate(-.38px,-.75px)}70%{-webkit-transform:translate(-2.85px,.3px);transform:translate(-2.85px,.3px)}65%{-webkit-transform:translate(.18px,0);transform:translate(.18px,0)}60%{-webkit-transform:translate(-.6px,.8px);transform:translate(-.6px,.8px)}55%{-webkit-transform:translate(-.68px,-.9px);transform:translate(-.68px,-.9px)}50%{-webkit-transform:translate(-3.25px,1.5px);transform:translate(-3.25px,1.5px)}45%{-webkit-transform:translate(3.03px,.55px);transform:translate(3.03px,.55px)}40%{-webkit-transform:translate(-3.3px,-1.8px);transform:translate(-3.3px,-1.8px)}35%{-webkit-transform:translate(-4.88px,1.95px);transform:translate(-4.88px,1.95px)}30%{-webkit-transform:translate(1.05px,-1.4px);transform:translate(1.05px,-1.4px)}25%{-webkit-transform:translate(1.88px,1.5px);transform:translate(1.88px,1.5px)}20%{-webkit-transform:translate(-6px,2.4px);transform:translate(-6px,2.4px)}15%{-webkit-transform:translate(9.78px,1.7px);transform:translate(9.78px,1.7px)}10%{-webkit-transform:translate(-1.35px,-.9px);transform:translate(-1.35px,-.9px)}5%{-webkit-transform:translate(-9.03px,.95px);transform:translate(-9.03px,.95px)}}@-webkit-keyframes jitter-20-24-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.35px,.15px);transform:translate(.35px,.15px)}90%{-webkit-transform:translate(.9px,-.3px);transform:translate(.9px,-.3px)}85%{-webkit-transform:translate(1.05px,-.3px);transform:translate(1.05px,-.3px)}80%{-webkit-transform:translate(.8px,.2px);transform:translate(.8px,.2px)}75%{-webkit-transform:translate(.75px,-.25px);transform:translate(.75px,-.25px)}70%{-webkit-transform:translate(-3.3px,.3px);transform:translate(-3.3px,.3px)}65%{-webkit-transform:translate(3.85px,.35px);transform:translate(3.85px,.35px)}60%{-webkit-transform:translate(-3.2px,-.4px);transform:translate(-3.2px,-.4px)}55%{-webkit-transform:translate(-1.8px,-.9px);transform:translate(-1.8px,-.9px)}50%{-webkit-transform:translate(-2px,-.5px);transform:translate(-2px,-.5px)}45%{-webkit-transform:translate(-.55px,.55px);transform:translate(-.55px,.55px)}40%{-webkit-transform:translate(-5.4px,1.2px);transform:translate(-5.4px,1.2px)}35%{-webkit-transform:translate(-3.9px,0);transform:translate(-3.9px,0)}30%{-webkit-transform:translate(7.7px,-2.1px);transform:translate(7.7px,-2.1px)}25%{-webkit-transform:translate(2.25px,-2.25px);transform:translate(2.25px,-2.25px)}20%{-webkit-transform:translate(2.4px,3.2px);transform:translate(2.4px,3.2px)}15%{-webkit-transform:translate(5.1px,1.7px);transform:translate(5.1px,1.7px)}10%{-webkit-transform:translate(-8.1px,.9px);transform:translate(-8.1px,.9px)}5%{-webkit-transform:translate(5.7px,.95px);transform:translate(5.7px,.95px)}}@keyframes jitter-20-24-8{100%{-webkit-transform:translate(0,0);transform:translate(0,0)}95%{-webkit-transform:translate(.35px,.15px);transform:translate(.35px,.15px)}90%{-webkit-transform:translate(.9px,-.3px);transform:translate(.9px,-.3px)}85%{-webkit-transform:translate(1.05px,-.3px);transform:translate(1.05px,-.3px)}80%{-webkit-transform:translate(.8px,.2px);transform:translate(.8px,.2px)}75%{-webkit-transform:translate(.75px,-.25px);transform:translate(.75px,-.25px)}70%{-webkit-transform:translate(-3.3px,.3px);transform:translate(-3.3px,.3px)}65%{-webkit-transform:translate(3.85px,.35px);transform:translate(3.85px,.35px)}60%{-webkit-transform:translate(-3.2px,-.4px);transform:translate(-3.2px,-.4px)}55%{-webkit-transform:translate(-1.8px,-.9px);transform:translate(-1.8px,-.9px)}50%{-webkit-transform:translate(-2px,-.5px);transform:translate(-2px,-.5px)}45%{-webkit-transform:translate(-.55px,.55px);transform:translate(-.55px,.55px)}40%{-webkit-transform:translate(-5.4px,1.2px);transform:translate(-5.4px,1.2px)}35%{-webkit-transform:translate(-3.9px,0);transform:translate(-3.9px,0)}30%{-webkit-transform:translate(7.7px,-2.1px);transform:translate(7.7px,-2.1px)}25%{-webkit-transform:translate(2.25px,-2.25px);transform:translate(2.25px,-2.25px)}20%{-webkit-transform:translate(2.4px,3.2px);transform:translate(2.4px,3.2px)}15%{-webkit-transform:translate(5.1px,1.7px);transform:translate(5.1px,1.7px)}10%{-webkit-transform:translate(-8.1px,.9px);transform:translate(-8.1px,.9px)}5%{-webkit-transform:translate(5.7px,.95px);transform:translate(5.7px,.95px)}}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}body{background-color:#111}a{text-decoration:none;color:#fff}.glitch-btn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:inline-block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:36px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;z-index:1;-webkit-transition:all .8s cubic-bezier(.23,1,.32,1);transition:all .8s cubic-bezier(.23,1,.32,1)}.glitch-btn:after,.glitch-btn:before{content:'''';top:50%;left:-18px;padding:0 15px;position:absolute;width:100%}.glitch-btn:hover{color:#000}.glitch-btn:hover:before{background:#fff;-webkit-transform:translateY(-50%) scaleY(1.5);transform:translateY(-50%) scaleY(1.5)}.glitch-btn:before{background:rgba(255,255,255,.1);height:80%;z-index:-1;-webkit-transition:all .8s cubic-bezier(.23,1,.32,1);transition:all .8s cubic-bezier(.23,1,.32,1)}.glitch-btn:after{background:0 0;height:100%}.glitch-btn .mask{position:absolute;-webkit-backface-visibility:hidden;height:20%;width:100%;overflow:hidden;display:none}.glitch-btn .mask span{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100%}.glitch-btn .mask:nth-child(6){top:100%}.glitch-btn .mask:nth-child(6) span{top:-500%}.glitch-btn .mask:nth-child(5){top:80%}.glitch-btn .mask:nth-child(5) span{top:-400%}.glitch-btn .mask:nth-child(4){top:60%}.glitch-btn .mask:nth-child(4) span{top:-300%}.glitch-btn .mask:nth-child(3){top:40%}.glitch-btn .mask:nth-child(3) span{top:-200%}.glitch-btn .mask:nth-child(2){top:20%}.glitch-btn .mask:nth-child(2) span{top:-100%}.glitch-btn:hover .mask{display:block}.glitch-btn:hover .mask:nth-child(6){-webkit-animation:jitter-20-25-8 .3s both;animation:jitter-20-25-8 .3s both}.glitch-btn:hover .mask:nth-child(5){-webkit-animation:jitter-20-24-8 .3s both;animation:jitter-20-24-8 .3s both}.glitch-btn:hover .mask:nth-child(4){-webkit-animation:jitter-20-23-8 .3s both;animation:jitter-20-23-8 .3s both}.glitch-btn:hover .mask:nth-child(3){-webkit-animation:jitter-20-22-8 .3s both;animation:jitter-20-22-8 .3s both}.glitch-btn:hover .mask:nth-child(2){-webkit-animation:jitter-20-21-8 .3s both;animation:jitter-20-21-8 .3s both}

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

Answer 3

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