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

图片上有文字,鼠标移上去文字消失,图片变清晰的效果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; } } } } }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 图片上有文字,鼠标移上去文字消失,图片变清晰的效果css怎样实现
分享到:
赞(0)
广告位820*80