.container {
    position: relative;
  }
  
.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
  
.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}
.mask{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background-attachment:fixed;
}
.mask
{
    --mdb-image-hover-transition:all 0.3s ease-in-out;
    opacity:0;
    transition:var(--mdb-image-hover-transition)
}
.mask:hover{
    opacity: 0.9;
}