图片上有文字，鼠标移上去文字消失，图片变清晰的效果css怎样实现
html代码部分
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
js代码部分
$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;
}
}
}
}
}