Bootstrap framework snippet bs4 beta gallery

This bootstrap framework snippet "bs4 beta gallery" was designed to help people of all skill levels - designer or developer,
huge nerd or early beginner. copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: gallery


<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Open Imagination"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=00FF7F" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Open Imagination</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Locked Steel Gate"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=111111" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Locked Steel Gate</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Mac Sunglasses"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=00FA9A" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Mac Sunglasses</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Morning Dew"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=20B2AA" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Morning Dew</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Console Activity"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=008000" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Console Activity</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Shake It!"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=228B22" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Shake It!</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Backpack Content"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=1E90FF" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Backpack Content</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Sunset Bulb Glow"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=FF1493" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Sunset Bulb Glow</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Open Imagination"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=006400" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Open Imagination</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Console Activity"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=00BFFF" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Console Activity</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Open Imagination"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=9932CC" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Open Imagination</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> <div class="col-md-3 col-sm-6"> <a href="#" class="gallery-popup" title="Shake It!"> <div class="project-item"> <div class="overlay-container"> <img src="https://placeholdit.co//i/100x100?bg=DC143C" alt="img" class="gallery-thumb-img"> <div class="project-item-overlay"> <h4>Shake It!</h4> <p> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="thumb-sm rounded-circle"> <span class="ml-2">Curtis Marion</span> </p> </div> </div> </div> </a> </div> </div> </div>
body{margin-top:20px;background:#FCFCFC} /* ============= Gallery ============= */ .overlay-container { position: relative; } .project-item img.gallery-thumb-img { display: block; width: 100%; height: auto; border-radius: 5px; margin-bottom: 10px; margin-top: 10px; } .project-item-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; border-radius: 5px; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ transition: .5s ease; } .project-item-overlay h4 { font-size: 18px; font-weight: 500; white-space: nowrap; color: white; position: absolute; overflow: hidden; top: 7%; left: 7%; margin: 0; text-overflow: ellipsis; } .project-item-overlay p { font-size: 15px; font-weight: 600; white-space: nowrap; color: white; position: absolute; overflow: hidden; bottom: 7%; left: 7%; text-overflow: ellipsis; margin: 0; } .overlay-container:hover .project-item-overlay { top: 0; bottom: 0; left: 0; right: 0; opacity: 1; height: 100%; width: 100%; transition: .5s ease; } .thumb-sm { height: 32px; width: 32px; } .rounded-circle { border-radius: 50%; }

Creator of this snippet

Dey Dey

Bootstrap version: 4.0.0-beta

Created: Sep 19th, 18:59

Views: 995