Html
Transparent Text Effects
CSS
body { margin: 0; padding: 0; } section { position: relative; width: 100%; height: 100vh; background: url(bg.jpg); } section:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(bg.jpg); opacity: .5; mix-blend-mode: hard-light; } section:hover:before { animation: animate .2s linear infinite; } @keyframes animate { 0% { background-position: 0 0; filter: hue-rotate(0deg); } 10% { background-position: 5px 0; } 20% { background-position: -5px 0; } 30% { background-position: 15px 0; } 40% { background-position: -5px 0; } 50% { background-position: -25px 0; } 60% { background-position: -50px 0; } 70% { background-position: 0 -20px; } 80% { background-position: -60px -20px; } 81% { background-position: 0 0; } 100% { background-position: 0 0; filter: hue-rotate(360deg); } }
Leave a Comment