https://codepen.io/giana/pen/YZWjQy <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS-only directionally aware hover</title> <style type="text/css"> /* The magic */ .col { overflow: hidden; position: relative; } .slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Visibility delay gives the previously hovered element time to slide out before disappearing. Remove the `visibility` transition to slide in current element without sliding out previous element */ -webkit-transition: all 0.275s ease-in-out, visibility 0s 0.275s; transition: all 0.275s ease-in-out, visibility 0s 0.275s; visibility: hidden; will-change: transform; -webkit-transform: translateY(100%); transform: translateY(100%); } .row:hover ~ .row .slide { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .row:hover .slide { -webkit-transform: translateX(100%); transform: translateX(100%); } .row:hover .col:hover ~ .col .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .row:hover .col:hover .slide { -webkit-transform: none; transform: none; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; } /* Pen styling */ * { box-sizing: border-box; } body { background: #fefefe; color: #333; font: 14px /1.5 "Fira Sans", sans-serif; } h1 { font-size: 2.5rem; font-weight: 300; margin: 1.5em 0.5rem 1em; text-align: center; } .container { margin: 0 auto; padding: 2rem; max-width: 1200px; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; } .col { color: #fff; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 260px; position: relative; } .col h2 { font-weight: 300; font-size: 1.33333rem; line-height: 1.25; margin: 0; position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 0; } .col:nth-child(2) { min-width: 20%; } .col:nth-child(4) { min-width: 33%; } .col:nth-child(3) + .col:nth-child(3) { min-width: 50%; } .photo-container { background: #0f0523 50% 50% / cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: 1s; transition: 1s; -webkit-transform-origin: bottom right; transform-origin: bottom right; } .photo-container::before { background: -webkit-linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320); background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320); content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .col:hover .photo-container { -webkit-transform: scale(1.25); transform: scale(1.25); } .slide { background: rgba(25, 1, 21, 0.8); padding: 0 1.5rem; } </style> </head> <body> <h1>Hover around the boxes below</h1> <div class="container"> <div class="row"> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201705/19/20170519025232980526.jpg)"></div> <h2>Image 17 </h2> <div class="slide"> <p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201704/28/20170428053329882450.jpg)"></div> <h2>Image 110 </h2> <div class="slide"> <p>Quam molestiae ipsa sapiente mollitia, nobis.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201704/27/20170427034306655979.jpg)"></div> <h2>Image 136 </h2> <div class="slide"> <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201704/27/20170427034308045255.jpg)"></div> <h2>Image 39 </h2> <div class="slide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="row"> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201704/26/20170426055414780814.jpg)"></div> <h2>Image 136 </h2> <div class="slide"> <p>Doloremque quisquam molestias, est laudantium vero aliquid dolorum inventore atque sint perferendis qui dolor voluptas consequuntur non.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201704/26/20170426055416026218.jpg)"></div> <h2>Image 0 </h2> <div class="slide"> <p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201703/30/20170330041730110608.jpg)"></div> <h2>Image 122 </h2> <div class="slide"> <p>Quam molestiae ipsa sapiente mollitia, nobis.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201703/28/20170328044546342280.jpg)"></div> <h2>Image 221 </h2> <div class="slide"> <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201703/31/20170331045426043581.jpg)"></div> <h2>Image 214 </h2> <div class="slide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="row"> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201703/24/20170324043532999136.jpg)"></div> <h2>Image 71 </h2> <div class="slide"> <p>Quam molestiae ipsa sapiente mollitia, nobis.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201702/22/20170222053558873337.jpg)"></div> <h2>Image 180 </h2> <div class="slide"> <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201701/22/20170122050948054797.jpg)"></div> <h2>Image 279 </h2> <div class="slide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="row"> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201701/22/20170122050949266196.jpg)"></div> <h2>Image 48 </h2> <div class="slide"> <p>Quam molestiae ipsa sapiente mollitia, nobis.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201701/07/20170107043306156378.jpg)"></div> <h2>Image 218 </h2> <div class="slide"> <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(http://img2.xcabc.com/201701/07/20170107041017216983.jpg)"></div> <h2>Image 156 </h2> <div class="slide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 纯css方向进入 喜欢 (0)or分享 (0)
