/*
Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%
*/    
#ul-menubar .text{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    text-align:center;
    padding: 10px;
    display: flex;
    align-items: center;     /* Align the flex-items vertically */
    justify-content: center;
}

.rect-vert {
    overflow: hidden;
    float:left;
    position: relative;
    width: 18%;
    padding-bottom : 41%; /* = width for a 1:1 aspect ratio */
    margin:0.5%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:120%; /* you change this to "contain" if you don't want the images to be cropped */
}

.rect {
    overflow: hidden;
    float:left;
    position: relative;
    width: 37%;
    padding-bottom : 20%; /* = width for a 1:1 aspect ratio */
    margin:0.5%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:120%; /* you change this to "contain" if you don't want the images to be cropped */
}

.square {
    overflow: hidden;
    float:left;
    position: relative;
    width: 18%;
    padding-bottom : 20%; /* = width for a 1:1 aspect ratio */
    margin:0.5%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:120%; /* you change this to "contain" if you don't want the images to be cropped */
}

.square-2x {
    overflow: hidden;
    float:left;
    position: relative;
    width: 37%;
    padding-bottom : 41%; /* = width for a 1:1 aspect ratio */
    margin:0.5%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:120%; /* you change this to "contain" if you don't want the images to be cropped */
}
.square:hover,
.square-2x:hover,
.rect:hover,
.rect-vert:hover {
    background-size: 130%;
    background-position:30% 30%;
    transition:all 0.5s ;
    -webkit-transition:all 0.5s ;
    -o-transition:all 0.5s ;
    -moz-transition:all 0.5s ;
}