Using black text on a blog

All code in this article is from the Moegirl Encyclopedia

Introduction#

Blackout text refers to a default black bar that reveals hidden text when the mouse hovers over it.

Example#

Text

Usage#

Place the following code in the page's CSS:

.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
    color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #BA0000 !important;
}

To achieve the blackout effect, simply add the following code: place <span class="heimu" title="Text to display on the blackout"> before the target text, and add </span> after the target text. This way, the target text will be covered by a black semi-transparent background, creating the blackout effect.