Ask a question »

CSS - Create a pop-up (no JavaScript)

May 2016

Here's how to create a popup in CSS, without making use of JavaScript

Use :hover to switch CSS when moving the cursor.
Among the modified CSS attributes, use display:none to hide/show the popup, depending on the position of the cursor.

A popup with a link

The content of the popup is placed in a <span> tag within the <a> tag
Here is the CSS code to add in the <head> your html file or in a separate CSS file: 
    z-index:24; background-color:#ddd; 
} {z-index:25; background-color:#ff0} span{display: none} span 
    top:2em; left:2em; width:10em; 
    border:1px solid #0cf; 
    background-color:#555; color:#fff; 

The HTML code to be inserted in your webpage:

    Voici un lien vers <a class="info" href="">CCM<span>Communauté d'assistance et de conseils high tech</span></a>. 

The results:

Without cursor:

With cursor:

A popup without link

If you just want to make a popup without any link, you can put href="#" in your <a> tag, but some browsers consider that "#" is a link to the top of the page.

To counter this, replace the <a> tag with a <span> tag (in HTML and CSS).
    z-index:24; background-color:#ddd;
    cursor: pointer;

For unlimited offline reading, you can download this article for free in PDF format:

See also

In the same category

Published by jak58. - Latest update by deri58
This document entitled « CSS - Create a pop-up (no JavaScript) » from CCM ( is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.