.thumbnail:hover{
background-color: transparent;

}

.thumbnail:hover img{
max-height: 100%;
max-width: 100%;

}

.thumbnail span{ /*CSS for enlarged image*/
background-color: transparent;
position: absolute;
visibility: hidden;
text-decoration: none;
z-index: 50;
/* this transition doesn't work?*/
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;


}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
left: 50%;
top: 10%;
margin-right: 1rem;
height: 50vh;
width: auto;



}