popup lightbox 02# >> css

<style type="text/css">
.gallery ul{
    list-style: none;
    padding: 0;
}
.gallery li{ /* kis képek */
    display: inline;
    width: 23.05%; /* a képek szélessége */
    margin: 5px; /* a képek közötti távolság */
    position: relative;
    font-size: 0;
        text-align: center;
    float: left; /* ezt ne bántsd */
}

.gallery li:hover{
  cursor: pointer; /* az egér kinézete amikor ráviszed az egeret valamelyik képre */
  box-shadow: 0px; /* árnyék a képeknek */
}

.gallery img{
    width: 100%; /* ezt se bántsd */
}

.lightbox{ /* a felugró ablak háttere */
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.7); /* háttérszín */
    position: fixed; /* ne bántsd */
    z-index: 20;
        padding-top: 5%; /* mennyire legyen lejjebb a kép a lap tetejétől */
    box-sizing: border-box;
        cursor: pointer; /* kurzor kinézete amikor ráviszed az egeret */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
}

.lightbox img{ /* felugró kép */
    max-width: 100%; /* maximális szélesség */
    margin: auto;
    display: block;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
}

.lightbox .caption{ /* megjegyzések a képeknél */
    margin: 15px auto;
    width: 50%;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: solid;
        font-family: Georgia;
        font-style: italic;
    color: #121212;
}</style>