xxxxxxxxxx1
<div class="container">2
<h1>Book review</h1>3
<p>4
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In officiis5
ipsa harum quidem. Nihil alias laboriosam recusandae numquam cum facere,6
vitae illo enim tempore cupiditate, error, atque aspernatur quam dicta.7
</p>8
9
<h2>Spoiler alert!</h2>10
<h5>(Hover to reveal)</h5>11
12
<p class="spoiler">13
This season is gonna blow your mind ! Like this season is crazy dawg!14
You know what happens on the first episode ? You are not gonna believe15
me bro, like It's crazy dude !16
</p>17
</div>xxxxxxxxxx1
/* Base */2
body {3
padding: 0;4
margin: 0;5
display: flex;6
align-items: center;7
justify-content: center;8
min-height: 100vh;9
font-family: Arial;10
font-size: 1.5rem;11
line-height: 150%;12
}13
14
.container {15
max-width: 700px;16
}17
18
.spoiler {19
color: transparent;20
background-position: right;21
background-size: 100% 100%;22
background-image: linear-gradient(#a0aec0, #a0aec0);23
display: inline;24
background-repeat: no-repeat;25
transition: all 500ms ease-in-out;26
}27
.spoiler:hover {28
color: #000;29
background-size: 0% 100%;30
}1
1
Console errors: 0