Posts mit dem Label css werden angezeigt. Alle Posts anzeigen
Posts mit dem Label css werden angezeigt. Alle Posts anzeigen

Donnerstag, Februar 09, 2012

Html Popups mit CSS

Der Originalbeitrag kommt von psacake.com.

Es wird ein Link ausgenutzt, um die Funktionalitaet bereit zu stellen:
This is the LinkThis is the Popup
Und nun noch der CSS Code:
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
ohne-css.gehts-gar.net hat das noch etwas weiter getrieben und eine Grafik integriert:
a.info:hover span
{
display:block;
position:absolute;
top:-60px;
left:300px;
width:234px;
height: 60px;
background: url(grafik.jpg);
}