Có thể tạo lightbox (hộp ảnh nổi) trên trang web bằng CSS và JavaScript. Ví dụ dưới đây minh họa.
Ví dụ
<!DOCTYPE html> <html> <style> #parent { margin: 2%; padding: 0; box-sizing: border-box; background: cornflowerblue; text-align: center; } html,body { height:100%; max-height:100%; min-height:100%; } .smart { display: block; margin: 0 auto; width: 150px; height :150px; } .animation2 { -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition:.4s ease-in-out; transition:.4s ease-in-out; } .customLightbox img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: 0%; max-height: 0%; } #lightbox-controls { position: fixed; height: 70px; width: 70px; top: -70px; right: 0; z-index: 2; background: rgba(0,0,0,.1); } #close-lightbox { display: block; position: absolute; overflow: hidden; height: 50px; width: 50px; text-indent: -5000px; right: 10px; top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-lightbox:before { content: ''; display: block; position: absolute; height: 0px; width: 3px; left: 24px; top :0; background: white; } #close-lightbox:after { content: ''; display: block; position: absolute; width: 0px; height: 3px; top: 24px; left:0; background: white; } .customLightbox:target { top: 0%; bottom: 0%; opacity: 1; } .customLightbox:target img { max-width: 100%; max-height: 100%; } .customLightbox:target ~ #lightbox-controls { top: 0px; } .customLightbox:target ~ #lightbox-controls #close-lightbox:after { width: 50px; } .customLightbox:target ~ #lightbox-controls #close-lightbox:before { height: 50px; } @-webkit-keyframes smart { 0% { -webkit-transform: rotate(2deg); } 20% {-webkit-transform: rotate(-2deg);} 40% {-webkit-transform: rotate(2deg);} 60% {-webkit-transform: rotate(-2deg);} 80% {-webkit-transform: rotate(2deg);} 100% {-webkit-transform: rotate(-2deg);} } </style> <body> <div id="parent"> <h3>Lightbox Example</h3> <a href="#picture" class="smart"><img src="https://images.unsplash.com/photo1611460116297- 586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=130&ixlib=rb1.2.1&q=80&w=130"/> <div class="customLightbox" id="picture"> <img class="animation2" src="https://images.unsplash.com/photo-1611460116297- 586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=630&ixlib=rb1.2.1&q=80&w=630"/> </div> <div id="lightbox-controls" > <a id="close-lightbox" class="animation2" href="#">Close Lightbox</a> </div> </div> </body> </html>
Kết quả
Kết quả như hình (lightbox mở/đóng bằng CSS :target, không cần JS nhiều).