CSS - show text on hover

0 points
Created by:

In this article, we would like to show you how to show text on hover using CSS.

1. Create a new style for hidden class (using . selector),

2. set the hidden to be invisible at the start using display: none,

3. for the container (in our case the div element) use the :hover pseudo-class with display: block property inside to show up the hidden text when you hover it.

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
    body {
    height: 50px;

    div {
      height: 15px;
      width: 70px;
      padding: 5px;
      color: white;
      border-radius: 5px;
      background: #28a745;

    .hidden {
      position: relative;
      height: 15px;
      width: 100px;
      left: 75px;
      top: 5px;
      background: gray;

      display: none;  /* hide text */

    div:hover .hidden {
      display: block;    /* show text */

    Hover me!
    <div class="hidden">Example text...</div>


Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂