<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>瀑布流</title> <link rel="stylesheet" href="css/style.css"> <script the src = "JS / jQuery-3.4.1.js" type = "text / JavaScript" > </ Script > </ head > < body > < sectionTop ID = "the titleBar" > < H2 > cascade </ H2 > < / sectionTop > < div ID = "wrap" > <-! shortcuts to quickly generate div structure inside the wrap -> <-! (div.box> div.info> ((div.pic> IMG [the src = "IMG / $ JPG."]) + (div.title> A [the href = #]} {This title IS A))) 10 * -> <div class="box"> <div class="info"> <div class="pic"><img src="img/1.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/2.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/3.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/4.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/5.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/6.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/7.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/8.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/9.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/10.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> </div> </body> </html>
css file is as follows
body { margin: 0; padding: 0; } body { background: #ddd url(../img/bg.jpg) repeat; } img { border: none; } a { text-decoration: none; color: #444; } @-webkit-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @-moz-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @-o-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @-ms-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } #titleBar { width: 600px; margin: 20px auto; text-align: center; } #wrap { width: auto; height: auto; margin: 0 auto; position: relative; } #wrap .box { width: 280px; height: auto; padding: 10px; border: none; float: left; } #wrap .box .info { width: 280px; height: auto; border-radius: 8px; background: #fff; } #wrap .box .info .pic { width: 260px; height: auto; margin: 0 auto; padding-top: 10px; } #wrap .box .info .pic:hover { -webkit-animation: shade 3s ease-in-out 1; -moz-animation: shade 3s ease-in-out 1; -o-animation: shade 3s ease-in-out 1; -ms-animation: shade 3s ease-in-out 1; animation: shade 3s ease-in-out 1; } #wrap .box .info .title:hover { -webkit-animation: shade 3s ease-in-out 1; -moz-animation: shade 3s ease-in-out 1; -o-animation: shade 3s ease-in-out 1; -ms-animation: shade 3s ease-in-out 1; animation: shade 3s ease-in-out 1; } #wrap .box .info img { width: 260px; border-radius: 3px; } #wrap .box .info .title { width: 260px; height: 40px; margin: 0 auto; line-height: 40px; text-align: center; color: #666; font-size: 18px; font-weight: bold; overflow: hidden; }
FIG effect as
Hope prawn educated us!
Thank you