hover显示文字 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Tile Hover Effect</title>  <style type="text/css"> .tiles { width: 1040px; font-size: 0; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tiles .tile { display: inline-block; margin: 10px; text-align: left; opacity: .99; overflow: hidden; position: relative; border-radius: 3px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); } .tiles .tile:before { content: ''; background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%); width: 100%; height: 50%; opacity: 0; position: absolute; top: 100%; left: 0; z-index: 2; -webkit-transition-property: top, opacity; transition-property: top, opacity; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .tiles .tile img { display: block; max-width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tiles .tile .details { font-size: 16px; padding: 20px; color: #fff; position: absolute; bottom: 0; left: 0; z-index: 3; } .tiles .tile .details span { display: block; opacity: 0; position: relative; top: 100px; -webkit-transition-property: top, opacity; transition-property: top, opacity; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0s; transition-delay: 0s; } .tiles .tile .details .title { line-height: 1; font-weight: 600; font-size: 18px; } .tiles .tile .details .info { line-height: 1.2; margin-top: 5px; font-size: 12px; } .tiles .tile:focus:before, .tiles .tile:focus span, .tiles .tile:hover:before, .tiles .tile:hover span { opacity: 1; } .tiles .tile:focus:before, .tiles .tile:hover:before { top: 50%; } .tiles .tile:focus span, .tiles .tile:hover span { top: 0; } .tiles .tile:focus .title, .tiles .tile:hover .title { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .tiles .tile:focus .info, .tiles .tile:hover .info { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } </style> </head> <body> <div class="tiles"> <a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg"/> <div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div> </a> <a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/2.jpg"/> <div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div> </a> <a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/3.jpg"/> <div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div> </a> <a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/4.jpg"/> <div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div> </a> </div> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » hover显示文字