.flex-images { overflow: hidden; position: relative; }
.flex-images .item { float: left; margin: 5px; background: #eee; box-sizing: content-box; overflow: hidden; position: relative;  }
.flex-images .item img { display: block; width: auto; height: 100%; max-width: none; }
.flex-images .item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; font-size: 12px; color: #fff; background: #222; background: rgba(0,0,0,.7);font-weight: normal;text-align: center; }
.flex-images .item .caption {
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    -o-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: -webkit-transform 0.26s ease-out;
    -o-transition: -o-transform 0.26s ease;
    -ms-transition: -ms-transform 0.26s ease;
    transition: transform 0.26s ease;
}
.flex-images .item:hover .caption {
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

/* fix to get the caption on the image on landscape mobile screens */
@media (max-width:991px) and (orientation:landscape) {
    #lightcase-info {
        position: absolute;
        background: none;
        width: 100%;
        bottom: 0;
        padding: 0px !important;
        z-index: 1;
    }

    #lightcase-info #lightcase-caption {
        color: #fff !important;
        font-size: 20px !important;
        background: #0009;
        padding: 0 10px !important;
    }
}