.tooltip ul {
    margin:-1%;
    padding:0;
    list-style-type:none;
}

.tooltip ul:after {
    content:"";
    display:block;
    clear:both;
}

.tooltip li {
    width:48%;
    float:left;
    margin:1%;
}

.tooltip figure {
    float:left;
    max-width:100%;
    margin:0;
    position:relative;
}

.tooltip img {
    display:block;
    max-width:100%;
    height:auto;
}

.tooltip figcaption {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,0.8);
    color:white;
    padding:5px;
    transition:0.8s;
    opacity:0;
    visibility:hidden;
}

.tooltip figure:hover figcaption {
    opacity:1;
    visibility:visible;
}