<section class="reveal-demo">
<div class="reveal">
POLL<span>U</span>TION
</div>
</section>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
scroll-behavior: smooth;
}
section {
height: 100vh;
font-size: 80px;
font-weight: bold;
transition: all 200ms;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 50% 50%;
display: grid;
place-items: center;
z-index: 1;
cursor: pointer;
position: relative;
padding: 20px;
}
.reveal-demo {
background: #111;
}
/*Waves*/
.reveal {
color: #fff;
-webkit-transition: all 400ms;
transition: all 400ms;
}
.reveal span {
display: inline-block;
-webkit-transition: all 400ms;
transition: all 400ms;
}
.reveal span:after {
content: 'can stop it';
position: absolute;
font-size: 20px;
font-weight: 700;
bottom: -10px;
left: 50%;
width: 200px;
text-align: center;
opacity: 0;
-webkit-transform: translateX(-50%) scale(0);
transform: translateX(-50%) scale(0);
-webkit-transition: all 400ms;
transition: all 400ms;
}
.reveal:hover {
color: rgba(255, 255, 255, 0.1);
}
.reveal:hover span {
-webkit-transform: scale(2);
transform: scale(2);
color: #fff;
margin: 0 45px;
}
.reveal:hover span:after {
opacity: 1;
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.