图片上有文字，鼠标移上去文字消失，图片变清晰的效果css怎样实现

header
h1 Find your favorite place…
.container
.thumbex
.thumbnail
a(href="javascript:void(0)")
img(src="https://bit.ly/2vnI5ZM")
span Beaches
.thumbex
.thumbnail
a(href="javascript:void(0)")
img(src="https://bit.ly/2DprTNZ")
span Mountains
.thumbex
.thumbnail
a(href="javascript:void(0)")
img(src="https://bit.ly/2NZ6ahm")
span Forest

$font: 'Raleway', sans-serif;

*{
margin: 0;
padding: 0;
}

body {
height: 100vh;
background: #84e8dc;
background: -moz-linear-gradient(-45deg, #84e8dc 0%, #f4ed8b 100%);
background: -webkit-linear-gradient(-45deg, #84e8dc 0%,#f4ed8b 100%);
background: linear-gradient(135deg, #84e8dc 0%,#f4ed8b 100%);
}

header {
padding: 50px 0;

h1{
color: white;
text-shadow: 1px 3px 4px rgba(0,0,0,0.4);
text-align: center;
font-size: 40px;
letter-spacing: 0.4px;
font-family: $font;
}
}

.container{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
padding: 0 30px;

.thumbex{
margin: 10px 20px 30px;
width: 100%;
min-width: 250px;
max-width: 435px;
height: 300px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
outline: 2px solid white;
outline-offset: -15px;
background-color: blue;
box-shadow: 5px 10px 40px 5px rgba(0,0,0,0.5);

.thumbnail{
overflow: hidden;
min-width: 250px;
height: 300px;
position: relative;
opacity: 0.88;
backface-visibility: hidden;
transition: all 0.4s ease-out;

img{
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
height: 115%;
width: auto;
transform: translate(-50%, -50%);
backface-visibility: hidden;
}

span{
position: absolute;
z-index: 2;
top: calc(150px – 20px);
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
padding: 10px 50px;
margin: 0 45px;
text-align: center;
font-size: 24px;
color: white;
font-weight: 300;
font-family: $font;
letter-spacing: 0.2px;
transition: all 0.3s ease-out;
}

&:hover{
backface-visibility: hidden;
transform: scale(1.15, 1.15);
opacity: 1;

span{
opacity: 0;
}

}
}
}
}