totemko

Site URL: https://www.matthieulorrain.com/ Hi all! I am trying to implement a glitch effect on hover for my title. I have been using the following code but somehow it does not seem to work. "logo." seems to be the right selector, but the glitch effect is not functional for me in square space Any idea how to fix this? site: matthieulorrain.com template: avenue initial code in code pen: https://codepen.io/kkhenriquez/pen/PGvmjm CSS: .logo { &:before, &:after { display: block; content: attr(data-glitch); text-transform: uppercase; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8; } &:after { color: #f0f; z-index: -2; } &:before { color: #0ff; z-index: -1; } &:hover { &:before { animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both 5 } &:after { animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both 5 } } } @media only screen and (max-width: 400px) { .glitch { font-size: 3em; } } @keyframes glitch { 0% { transform: translate(0) } 20% { transform: translate(-5px, 5px) } 40% { transform: translate(-5px, -5px) } 60% { transform: translate(5px, 5px) } 80% { transform: translate(5px, -5px) } to { transform: translate(0) } }