Hover Effect

HTML
<div class="box"> <h1>Hover me</h1> <h2>Awesome</h2> </div>
SCSS
html, body { background: tomato; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .box { background-color: rgba(0, 0, 0, 0.2); margin: auto; overflow: hidden; position: relative; text-align: center; color: #fff; border-radius: 10px; &:hover h1, &:hover h2 { transform: translateY(-120%); } } h1, h2 { font-size: 36px; margin: 0; padding: 1em; text-transform: uppercase; transition: transform 0.4s cubic-bezier(0.9, -0.4, 0.2, 1.4); } h2 { position: absolute; top: 120%; }
JAVASCRIPT
Expand for more options Login