https://livedemo00.template-help.com/wt_48559/ <!DOCTYPE html> <html lang="en" class="desktop"> <head> <meta charset="UTF-8"> <title>图片墙</title> <link href="http://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <style type="text/css"> body { background: #fff; font: 12px/20px 'Open Sans',sans-serif; color: #878787; text-transform: uppercase; overflow-x: hidden; } html.desktop #content>div { width: 100%; margin: 0 auto; position: relative; top: 0; z-index: 1; } html.desktop .container { max-width: 1002px; margin: 50px auto; } html.desktop .splash-thumbs { width: 972px; height: 729px; position: relative; z-index: 99; } html.desktop .splash-thumbs.__hovered__ li:not(.__hover__) { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: .7; z-index: 1; } html.desktop .splash-thumbs li { float: left; position: relative; overflow: hidden; opacity: 1; margin: 0; -webkit-transition: all 0.5s cubic-bezier(0.19,1,0.22,1); transition: all 0.5s cubic-bezier(0.19,1,0.22,1); } html.desktop .splash-thumbs li img { position: relative; z-index: 10; } html.desktop .splash-thumbs li.tip-left_1 .block_2 { left: -244px; } html.desktop .splash-thumbs li.tip-left .block_2 { left: -244px!important; } html.desktop .splash-thumbs li.tip-top .block_2 { top: -244px; } html.desktop .splash-thumbs li .block_2 { box-sizing: border-box; font: 13px/20px 'Open Sans',sans-serif; width: 244px; height: 243px; padding: 53px 20px 0 45px; display: block; text-transform: none; background: #1f1f1f; color: #8c8c8c; font-size: 9.38px; line-height: 14.4px; position: absolute; top: 0; left: 243px; opacity: 0; z-index: 1; -webkit-transition: all 0.4s cubic-bezier(0.39,0.575,0.565,1) 0.1s; transition: all 0.4s cubic-bezier(0.39,0.575,0.565,1) 0.1s; } html.desktop .splash-thumbs li .block_2 .width_0 { position: relative; display: inline-block; width: 40px; } html.desktop .splash-thumbs li .block_2 .portf { position: relative; text-align: right; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; font-size: 7.94px; margin-top: 22px; } html.desktop .splash-thumbs li .block_2 .portf a { position: relative; color: #ed1c24; } html.desktop .splash-thumbs li .block_2 .portf a:hover { color: #fff; text-decoration: none; } html.desktop .splash-thumbs li .block_2 .title { font-size: 30px; font-weight: 300; font-size: 21.66px; letter-spacing: -1px; color: #fff; display: block; clear: both; padding-bottom: 29px; } html.desktop .splash-thumbs li.__hover__ { -webkit-transform: scale(1.385); -ms-transform: scale(1.385); transform: scale(1.385); z-index: 99; opacity: 1; overflow: visible; } html.desktop .splash-thumbs li.__hover__ .block_2 { opacity: 1; } </style> </head> <body> <article class="container" id="content" data-follow="location" data-type="switcher" data-flags="ajax"> <div> <ul class="splash-thumbs" style="transform: scale(1);"> <li> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-1.jpg" alt=""> <div class="block_2"> <div class="title">Alison Black</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-2.jpg" alt=""> <div class="block_2"> <div class="title">Anna Ross</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="tip-left_1"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-3.jpg" alt=""> <div class="block_2"> <div class="title">Amanda Brian</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="tip-left_1"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-4.jpg" alt=""> <div class="block_2"> <div class="title">Deborah Waite</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-5.jpg" alt=""> <div class="block_2"> <div class="title">Sarah Blare</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="last"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-6.jpg" alt=""> <div class="block_2"> <div class="title">Mary Brown</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="tip-left_1"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-7.jpg" alt=""> <div class="block_2"> <div class="title">Agatha MacDonald</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="tip-left_1"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-8.jpg" alt=""> <div class="block_2"> <div class="title">Nicole WilKinson</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-9.jpg" alt=""> <div class="block_2"> <div class="title">Stefania Backer</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="last"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-10.jpg" alt=""> <div class="block_2"> <div class="title">Stacey Longman</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="tip-left_1"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-11.jpg" alt=""> <div class="block_2"> <div class="title">Theresa Holiday</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> <li class="tip-left_1"> <img src="https://livedemo00.template-help.com/wt_48559/img/splash-thumb-12.jpg" alt=""> <div class="block_2"> <div class="title">Dianne Brook</div> <span class="width_0">Height</span>5' 9"<br> <span class="width_0">Bust</span>32"<br> <span class="width_0">Waist</span>23"<br> <span class="width_0">Hips</span>34"<br> <span class="width_0">Shoes</span>9<br> <span class="width_0">Hair</span>Brown<br> <span class="width_0">Eyes</span>Green<br> <div class="portf"> <a href="./readmore.html" class="animate">Portfolio</a> </div> </div> </li> </ul> </div> </article> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('html.desktop:not(.tablet) .splash-thumbs').each(function() { var $this = $(this), li_coll = $('li', this) $this.on('mouseenter', 'li', function() { $this.addClass('__hovered__') li_coll.removeClass('__hover__') $(this).addClass('__hover__') }).on('mouseleave', function() { $this.removeClass('__hovered__') li_coll.removeClass('__hover__') }) }) $('html.tablet .splash-thumbs').each(function() { var $this = $(this), li_coll = $('li', this) li_coll.on('mouseenter tap touchstart', function() { $this.addClass('__hovered__') li_coll.removeClass('__hover__') $(this).addClass('__hover__') }) li_coll.each(function(n) { if(n % 2) $(this).addClass('tip-left') }) }) }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 图片墙 喜欢 (0)or分享 (0)
