http://codepen.io/ongtiffany/pen/BoOeQV <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Click to enlarge image in light box</title> <style type="text/css"> /*Eliminates padding, centers the thumbnail */ body, html { padding: 0; margin: 0; text-align: center; } /* Styles the thumbnail */ a.lightbox img { height: 150px; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); margin: 94px 20px 20px 20px; } /* Styles the lightbox, removes it from sight and adds the fade-in transition */ .lightbox-target { position: fixed; top: -100%; width: 100%; background: rgba(0,0,0,.7); width: 100%; opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; } /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */ .lightbox-target img { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 0%; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Styles the close link, adds the slide down transition */ a.lightbox-close { display: block; width:50px; height:50px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: -80px; right: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Provides part of the "X" to eliminate an image from the close link */ a.lightbox-close:before { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } /* Provides part of the "X" to eliminate an image from the close link */ a.lightbox-close:after { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */ .lightbox-target:target { opacity: 1; top: 0; bottom: 0; } .lightbox-target:target img { max-height: 100%; max-width: 100%; } .lightbox-target:target a.lightbox-close { top: 0px; } </style> </head> <body> <a class="lightbox" href="#dog"> <img src="http://i.huffpost.com/gen/749263/original.jpg"/> </a> <div class="lightbox-target" id="dog"> <img src="http://i.huffpost.com/gen/749263/original.jpg"/> <a class="lightbox-close" href="#"></a> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 点击放大图片 喜欢 (0)or分享 (0)
