"Elegant Beautiful Gallery "
Bootstrap 4.1.1 Snippet by antenagames.com

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>AntenaGames | Fun Mobile Games</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Indie game studio, Mobile games"> <meta name="author" content="A.K."> <link rel="stylesheet" href="bootstrap-4/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> --> <link rel="stylesheet" href="fontawesome-free-5.8.2/css/all.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Mali|Patrick+Hand" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body id="pagecontent"> <div id="cont-gallery" class="container-fluid cont cont-gallery"> <h2>Gallery</h2> <hr class="hr-class"> <div class="row no-gutter gallery slideanim"> <div class="col-sm-4 portfolio-item"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="portfolio-link" target="_blank"> <div class="caption"> <div class="caption-content"> <i class='fa fa-facebook-f' style='font-size:28px;color:white'></i> </div> </div> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_1_ogatcw.png" class="img-fluid " alt=""> </a> </div> <div class="col-sm-4 portfolio-item"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="portfolio-link" target="_blank"> <div class="caption"> <div class="caption-content"> <i class='fa fa-facebook-f' style='font-size:28px;color:white'></i> </div> </div> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_3_p7ekf9.png" class="img-fluid" alt=""> </a> </div> <div class="col-sm-4 portfolio-item"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="portfolio-link" target="_blank"> <div class="caption"> <div class="caption-content"> <i class='fa fa-facebook-f' style='font-size:28px;color:white'></i> </div> </div> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_2_fygl3b.png" class="img-fluid" alt="" > </a> </div> <div class="col-sm-4 portfolio-item"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="portfolio-link" target="_blank"> <div class="caption"> <div class="caption-content"> <i class='fa fa-facebook-f' style='font-size:28px;color:white'></i> </div> </div> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_4_j1twir.png" class="img-fluid" alt=""> </a> </div> <div class="col-sm-4 portfolio-item"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="portfolio-link" target="_blank"> <div class="caption"> <div class="caption-content"> <i class='fa fa-facebook-f' style='font-size:28px;color:white'></i> </div> </div> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_5_g4cpiq.png" class="img-fluid" alt=""> </a> </div> <div class="col-sm-4 portfolio-item"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="portfolio-link" target="_blank"> <div class="caption"> <div class="caption-content"> <i class='fa fa-facebook-f' style='font-size:28px;color:white'></i> </div> </div> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689870/gal_6_iyj65r.png" class="img-fluid" alt=""> </a> </div> </div> <div class="row more-img"> <div class="to-gallery"> <h4>For more pictures visit us on</h4> <div class="social-networks"> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank" class="facebook"><i class='fa fa-facebook' style='font-size:34px; color:white'></i></a> <a href="https://www.pinterest.com/antenagames10/" target="_blank" class="pintrest"><i class='fa fa-pinterest' style='font-size:34px; color:white'></i></a> </div> </div> </div> </div> </body> </html>
/********************************************************* GENERAL *********************************************************/ * { font-family: 'Mali', cursive; /* font-family: 'Roboto', sans-serif; */ } a:hover, a:focus { text-decoration: none; } h2 { text-transform: uppercase; text-align: center; font-weight: 700; font-size: 40px; color: #22aaee; } h3 { text-align: center; font-weight: 700; color: #55aaee; } p { color: #444; } hr { width: 10%; height: 5px; background-color: yellow; color: yellow; padding: 0 auto; margin: 0 auto 30px auto; } /* .slideanim { visibility: hidden; } */ .slide { animation-name: slide; -webkit-animation-name: slide; -moz-animation-name: slide; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; visibility: visible; } /* @keyframes slide { 0% { opacity: 0; transform: translateX(50%); } 100% { opacity: 1; transform: translateX(0%); } } @-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } */ .cont { padding: 60px; } .navbar { background-color: #55aaee; } .navbar-nav { padding-left: 10%; } .navbar-nav li a { font-size: 20px; font-weight: 700; color: #fff; margin: auto 20px; } .navbar-nav li a:hover { color: yellow; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .nav-social a { padding-right: 30px; } .nav-social i{ color: white; } .nav-social i:hover { color: yellow; } .navbar a.active{ color: yellow; } .navbar.scrolled { box-shadow: 0 3px 3px rgba(0,0,0,0.1); padding: 5px 0; opacity: 0.9; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .cont-small { background-color: #ddeeff; } .carousel-inner img { width: 100%; } .fa-bars { color: white; } .fa-bars:hover, .fa-bars.active { color: yellow; } /******************************************************** GALLERY ********************************************************/ .cont-gallery { background-color: #ddeeff; } .gallery { margin: 0 30px; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; } .caption-content { position: absolute; bottom: 100%; left: 0; right: 0; background: #77aacc; opacity: .8; color: #f1f1f1; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .portfolio-item:hover .caption-content { bottom: 0; height: 100%; } .caption-content .fa { white-space: nowrap; color: white; font-size: 40px; position: absolute; overflow: hidden; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .more-img { margin: 0 30px; background-color: #77aacc; } .more-img .to-gallery { text-align: center; text-transform: none; color: #fff; padding: 10px; margin: 0px auto; } .more-img .to-gallery h4 { text-transform: none; color: #fff; padding: 5px; margin: auto; font-size: 16px; } .more-img .social-networks .fa { font-size: 20px; margin: 5px 5px; color: white; } .more-img .social-networks .fa:hover { color: yellow; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

Related: See More

Material Kit React
Elegant Login Page
Elegant Bootstrap 4 message chat box template
arrow key navigation thumbnail gallery modal view

Questions / Comments:

Beautiful Elegant Gallery.

antgms (12) - 4 years ago - Reply 1