Make Spoiler Alert with Waiting Time when Hover

Spoiler alert salah satu jenis gaya spoiler yang cukup unik. Mungkin agak-agak mirip dengan trik spoiler popbox spoiler with blurred effect. Full 100% menggunakan bahasa CSS. Jika pada pop-box spoiler teks terlihat blur dan akan jelas ketika melakukan klik. Kalau pada gaya spoiler-alert, teks blur tampak dan akan jelas ketika dilakukan hover!

Vyyavlyayetʹsya , vin buv mertvyy vesʹ tsey chas. Tsey khlopetsʹ povnistyu yoho batʹko i pryntsesa yoho sestra . Vony vse alerhiya na vodu i vse vidbuvayetʹsya z prychyny. Vin vybrav odyn zaraz , ale vin ne buv pershym. Shcho dumav , shcho vin chuzhiy planeti bulo naspravdi Zemlya. Vony zvertayutʹsya lyudy odyn proty odnoho , shchob zrobyty vtorhnennya prostishe. Te , shcho vy dumaly , buly spohady diysno mayutʹ mistse v maybutnʹomu. Modelyuvannya buly realʹnymy .

Apakah sobat tertarik memasang spoiler content full stylish di atas ke dalam blog kalian?

Kode CSS:

.spoiler {
cursor: wait;
position: relative;
color: transparent;
text-align: justify;
text-shadow: 0 0 19px #000;
}
.spoiler::before, .spoiler::after {
color: #000;
display: block;
line-height: 1;
text-align: center;
text-shadow: none;
position: absolute;
font-family: arial, sans-serif;
}
.spoiler::before {
top: 19px;
left: 0;
right: 0;
font-size: inherit;
content: 'Please hover n wait 3 seconds...';
}
.spoiler::after {
top: 0;
opacity: 0;
width: 25px;
font-size: 25px;
content: '3 2 1';
line-height: 72px;
text-align: center;
left: calc(50% - 36px);
clip: rect(0, 72px, 72px, 0);
}
.spoiler:hover {
color: #000;
transition: all 1s;
transition-delay: 3s;
text-shadow: 0 0 0 transparent;
}
.spoiler:hover::before {
animation: countdown-before 4s forwards;
}
.spoiler:hover::after {
animation: countdown-after 4s forwards;
}
@keyframes countdown-before {
25% {
transform: translateY(-24px);
}
75% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-24px);
}
}
@keyframes countdown-after {
25% {
opacity: 1;
clip: rect(0, 72px, 72px, 0);
transform: translateY(0);
animation-timing-function: steps(1, start);
}
50% {
clip: rect(72px, 72px, 144px, 0);
transform: translateY(-72px);
animation-timing-function: steps(1, start);
}
75% {
opacity: 1;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
100% {
opacity: 0;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
}

Planning HTML:<p class="spoiler">

--------- CONTENT HERE ---------

</p>Source by: codepen.io/lonekorean/details/kocrl

Happy spoiler \m/