Design Drastic
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 1: */ .title.e1 { transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0%; } /* From left */ .title.e1.left { background-position: left; } .title.e1:hover { background-size: 100%; }
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 1: */ .title.e1 { transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0%; } /* Angle */ .title.e1.angle { transition: all .75s; background-image: linear-gradient(125deg, #ddbdff, #ddbdff 50%, transparent 50%); background-size: 0% 100%; } .title.e1.angle:hover { background-size: 215% 100%; }
Angle
From Right
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 1: */ .title.e1 { transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0%; } /* From right */ .title.e1.right { background-position: right; } .title.e1:hover { background-size: 100%; }
From Top
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 2 */ .title.e2 { transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 100% 0%; } /* From top */ .title.e2.top { background-position: top; } .title.e2:hover { background-size: 100% 100%; }
From Bottom
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 2 */ .title.e2 { transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 100% 0%; } /* From bottom */ .title.e2.bottom { background-position: bottom; } .title.e2:hover { background-size: 100% 100%; }
From Center
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 3: From center */ .title.e3 { transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0%; background-position: center; } .title.e3:hover { background-size: 100%; }
Design Drastic
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } /* Effect 4: Gradient */ .title.e4 { transition: all .75s linear; background-image: linear-gradient(90deg,#ddbdff 75%, transparent); background-size: 150% 100%; background-position-x: 300%; } .title.e4:hover { background-position-x: 0%; }
Copy CSS & JS
/* Direction aware hover */ .title.dir { background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0 0; } .title.dir[dd-dir="in-top"], .title.dir[dd-dir="in-bottom"] { animation: in-top-bottom .75s; animation-fill-mode: forwards; } .title.dir[dd-dir="in-top"] { background-position: top; } .title.dir[dd-dir="in-bottom"] { background-position: bottom; } @keyframes in-top-bottom { 0% { background-size: 100% 0%; } 100% { background-size: 100% 100%; } } .title.dir[dd-dir="in-left"], .title.dir[dd-dir="in-right"] { animation: in-left-right .75s; animation-fill-mode: forwards; } .title.dir[dd-dir="in-left"] { background-position: left; } .title.dir[dd-dir="in-right"] { background-position: right; } @keyframes in-left-right { 0% { background-size: 0% 100%; } 100% { background-size: 100% 100%; } } .title.dir[dd-dir="out-top"], .title.dir[dd-dir="out-bottom"] { animation: out-top-bottom 1s; animation-fill-mode: forwards; } .title.dir[dd-dir="out-top"] { background-position: top; } .title.dir[dd-dir="out-bottom"] { background-position: bottom; } @keyframes out-top-bottom { 0% { background-size: 100% 100%; } 100% { background-size: 100% 0%; } } .title.dir[dd-dir="out-left"], .title.dir[dd-dir="out-right"] { animation: out-left-right 1s; animation-fill-mode: forwards; } .title.dir[dd-dir="out-left"] { background-position: left; } .title.dir[dd-dir="out-right"] { background-position: right; } @keyframes out-left-right { 0% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } }Javascript
// Direction aware hover effect var dir_elems = document.querySelectorAll('[dd-dir]'); dir_elems.forEach(d => { // Handle mouse enter event d.addEventListener("mouseenter", mouseEnter); // Handle mouse leave event d.addEventListener("mouseleave", mouseLeave); }); // Handle mouse(enter/leave) events function mouseEvent(e, dir) { var el = e.target; var w = e.target.clientWidth; var h = e.target.clientHeight; var x = ( e.pageX - el.offsetLeft - ( w/2 )) * ( w > h ? ( h/w ) : 1 ); var y = ( e.pageY - el.offsetTop - ( h/2 )) * ( h > w ? ( w/h ) : 1 ); const d = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' }; var direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4; el.setAttribute('dd-dir', dir+'-'+d[direction]); } function mouseEnter(e) { mouseEvent(e, 'in'); } function mouseLeave(e) { mouseEvent(e, 'out'); }
Directional
Design
Drastic
Multicolor
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } .title.e5 { transition: all .75s linear; background-position: left; background-size: 0% 100%; background-image: linear-gradient(90deg, #F77692 0%, #F77692 25%, PaleGreen 25%, PaleGreen 50%, #6a5acd 50%, #6a5acd 75%, #008b8b 75%, #008b8b 100%); } .title.e5:hover { background-size: 100% 100%; }
Background Image
Copy CSS
.title { font-family: 'Montserrat'; font-weight: 900; font-size: 6rem; text-align: center; margin: 15px; display: inline-block; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ddbdff; -webkit-text-fill-color: transparent; background-repeat: no-repeat; background-clip: text; -webkit-background-clip: text; color: transparent; } .title.e6 { background-image: url("../image-path..."); transition: all .75s linear; background-position: left; background-size: 0% 100%; } .title.e6:hover { background-size: 100% 100%; }