/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    
}


.popupbox img {
    border-radius: 6px;
}

    /* The actual popup (appears on top) */
    .popup .popupbox {
        visibility: hidden;
        width: 200px;
        height: 200px;
        text-align: left;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        bottom: 110%;
        left: 0%;
        margin-left: 0px;
    }
.popupbox {
    background-color: dimgray;
    visibility: hidden;
}
        /* Popup arrow */
        .popup .popupbox::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 12%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show_pu {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}