bs4 beta gallery

This bootstrap snippet called "bs4 beta gallery" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: gallery

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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%;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.0.0-beta

Created: Sep 19th 2017, 18:59

Views: 1.8K

Rated 5/5 based on 3 reviews