.row {
    margin-top: 12px;
}


/* Craeted refering to LittleSnippets.net Pen: https://codepen.io/littlesnippets/pen/adLELd */
.frame {
    text-align: center; 
    position: relative;
    cursor: pointer;    
}
.frame img {
}

.frame .details {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
    transform-origin: 50%;
    /*background: rgba(255,255,255,0.9);*/  
    opacity: 0;
    transition: all 0.25s ease-in;
 	width:100%   
}
.frame:hover .details {
    transform: translate(-50%, -50%) rotateY(0deg);
    opacity: 1;
}