<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> <div class="container page-top"> <h1>Rene Magritte</h1> <div class="row"> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>The Son of Man - 1964</P> <a href="https://upload.wikimedia.org/wikipedia/en/thumb/e/e5/Magritte_TheSonOfMan.jpg/225px-Magritte_TheSonOfMan.jpg" class="fancybox" rel="ligthbox"> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e5/Magritte_TheSonOfMan.jpg/225px-Magritte_TheSonOfMan.jpg" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>The Treachery of Images - 1929</P> <a href="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/MagrittePipe.jpg/300px-MagrittePipe.jpg" class="fancybox" rel="ligthbox"> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/MagrittePipe.jpg/300px-MagrittePipe.jpg" class="zoom img-fluid" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>The Lovers - 1964</P> <a href="https://cdn.shopify.com/s/files/1/0969/9128/products/Rene_Magritte_The_Lovers_II_44799dd9-41ca-4bf1-8178-c1ccda529221.jpg?v=1510383073" class="fancybox" rel="ligthbox"> <img src="https://cdn.shopify.com/s/files/1/0969/9128/products/Rene_Magritte_The_Lovers_II_44799dd9-41ca-4bf1-8178-c1ccda529221.jpg?v=1510383073" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>Golconda - 1953</P> <a href="https://www.renemagritte.org/images/paintings/golconda.jpg" class="fancybox" rel="ligthbox"> <img src="https://www.renemagritte.org/images/paintings/golconda.jpg" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>Not to be Reproduced - 1937</P> <a href="https://upload.wikimedia.org/wikipedia/en/6/62/Portrait_of_Edward_James.jpg" class="fancybox" rel="ligthbox"> <img src="https://upload.wikimedia.org/wikipedia/en/6/62/Portrait_of_Edward_James.jpg" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>The Listening Room - 1952</P> <a href="https://www.renemagritte.org/images/paintings/the-listening-room.jpg" class="fancybox" rel="ligthbox"> <img src="https://www.renemagritte.org/images/paintings/the-listening-room.jpg" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>The Mysteries of the Horizon - 1955</P> <a href="https://images.masterworksfineart.com/2018/03/12/rene-magritte-the-masterpiece-or-the-mysteries-of-the-horizon-color-lithograph/Magritte-banner-1-550x261.jpg" class="fancybox" rel="ligthbox"> <img src="https://images.masterworksfineart.com/2018/03/12/rene-magritte-the-masterpiece-or-the-mysteries-of-the-horizon-color-lithograph/Magritte-banner-1-550x261.jpg" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <P>The alse Mirror- 1928</P> <a href="http://www.rene-magritte.com/The%20False%20Mirror%20Rene%20Magritte.jpg" class="fancybox" rel="ligthbox"> <img src="http://www.rene-magritte.com/The%20False%20Mirror%20Rene%20Magritte.jpg" class="zoom img-fluid " alt=""> </a> </div> </div> <a href="http://bootsnipp.com/iframe/WMln0" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FWMln0" target="_blank"><small>HTML</small>⁵</a> </div>

body { background-color:#1d1d1d !important; background-image: url("http://moma.org/d/assets/W1siZiIsIjIwMTgvMDEvMjMvMzdsbXlnYXpyX0FSQ0hfNzgxNl9GdWxsLmpwZyJdLFsicCIsImNvbnZlcnQiLCItcmVzaXplIDIwMDB4MjAwMFx1MDAzZSJdXQ/ARCH_7816-Full.jpg?sha=4d74b05a3d38011b"); font-family: "Asap", sans-serif; color:#989898; margin:10px; font-size:16px; } #demo { height:100%; position:relative; overflow:hidden; } .green{ background-color:#6fb936; } .thumb{ margin-bottom: 30px; } .page-top{ margin-top:85px; } img.zoom { width: 100%; height: 200px; border-radius:5px; object-fit:cover; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; } .transition { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .modal-header { border-bottom: none; } .modal-title { color:#000; } .modal-footer{ display:none; } h1 { font-size:100px; text-align: center; padding-bottom:20px; font-family: serif; color: #FFF; }

$(document).ready(function(){ $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); $(".zoom").hover(function(){ $(this).addClass('transition'); }, function(){ $(this).removeClass('transition'); }); });