*{
    margin: 0;
}
.container{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows: 1fr 1fr  1fr;
    margin: 0;
    border-top: black solid 5px;



}
.cell{
   
    transition: background-color .5s;
    position: relative;

}
.image{
    opacity: 1;
    display:inline;
    transition: .5s ease;
    backface-visibility: hidden;
    width: 300px;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
width: 43vw;
height:33vh;
}
.cell:hover .image {
opacity: 0.3;
}