Bootdey new snippets cards

This bootstrap snippet called "Bootdey new snippets cards" 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: snippets,cards,images

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippets">
    <div class="col-md-4">
       <div class="card card-background">
            <div class="image" style="background-image: url(https://lorempixel.com/266/200/nature/5/); background-size: cover; background-position: 50% 50%;">
                <div class="filter"></div>
            </div>
             <div class="content">
                <h5 class="price">user profile description
                     <a href="#" class="pull-right">
                        <i class="fa fa-heart"></i>3.3.5
                     </a>
                 </h5> 
            </div>
            <div class="footer">
               <div class="author">
                    <a href="#">
                       <span>Dey-Dey</span>
                    </a>
                </div>
               <div class="stats pull-right">
                    <i class="fa fa-eye"></i>  253                                
               </div>                           
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
       <div class="card card-background">
            <div class="image" style="background-image: url(https://lorempixel.com/266/200/nature/1/); background-size: cover; background-position: 50% 50%;">
                <div class="filter"></div>
            </div>
             <div class="content">
                <h5 class="price">user profile description
                     <a href="#" class="pull-right">
                        <i class="fa fa-heart"></i>3.3.5
                     </a>
                 </h5> 
            </div>
            <div class="footer">
               <div class="author">
                    <a href="#">
                       <span>Dey-Dey</span>
                    </a>
                </div>
               <div class="stats pull-right">
                    <i class="fa fa-eye"></i>  253                                
               </div>                           
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
       <div class="card card-background">
            <div class="image" style="background-image: url(https://lorempixel.com/266/200/nature/2/); background-size: cover; background-position: 50% 50%;">
                <div class="filter"></div>
            </div>
             <div class="content">
                <h5 class="price">user profile description
                     <a href="#" class="pull-right">
                        <i class="fa fa-heart"></i>3.3.5
                     </a>
                 </h5> 
            </div>
            <div class="footer">
               <div class="author">
                    <a href="#">
                       <span>Dey-Dey</span>
                    </a>
                </div>
               <div class="stats pull-right">
                    <i class="fa fa-eye"></i>  253                                
               </div>                           
            </div>
        </div>
    </div> 
    
    <div class="col-md-4">
       <div class="card card-background">
            <div class="image" style="background-image: url(https://lorempixel.com/266/200/nature/3/); background-size: cover; background-position: 50% 50%;">
                <div class="filter"></div>
            </div>
             <div class="content">
                <h5 class="price">user profile description
                     <a href="#" class="pull-right">
                        <i class="fa fa-heart"></i>3.3.5
                     </a>
                 </h5> 
            </div>
            <div class="footer">
               <div class="author">
                    <a href="#">
                       <span>Dey-Dey</span>
                    </a>
                </div>
               <div class="stats pull-right">
                    <i class="fa fa-eye"></i>  253                                
               </div>                           
            </div>
        </div>
    </div> 
    
    <div class="col-md-4">
       <div class="card card-background">
            <div class="image" style="background-image: url(https://lorempixel.com/266/200/nature/4/); background-size: cover; background-position: 50% 50%;">
                <div class="filter"></div>
            </div>
             <div class="content">
                <h5 class="price">user profile description
                     <a href="#" class="pull-right">
                        <i class="fa fa-heart"></i>3.3.5
                     </a>
                 </h5> 
            </div>
            <div class="footer">
               <div class="author">
                    <a href="#">
                       <span>Dey-Dey</span>
                    </a>
                </div>
               <div class="stats pull-right">
                    <i class="fa fa-eye"></i>  253                                
               </div>                           
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
       <div class="card card-background">
            <div class="image" style="background-image: url(https://lorempixel.com/266/200/nature/5/); background-size: cover; background-position: 50% 50%;">
                <div class="filter"></div>
            </div>
             <div class="content">
                <h5 class="price">user profile description
                     <a href="#" class="pull-right">
                        <i class="fa fa-heart"></i>3.3.5
                     </a>
                 </h5> 
            </div>
            <div class="footer">
               <div class="author">
                    <a href="#">
                       <span>Dey-Dey</span>
                    </a>
                </div>
               <div class="stats pull-right">
                    <i class="fa fa-eye"></i>  253                                
               </div>                           
            </div>
        </div>
    </div>
</div>

CSS code

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

body{margin-top:20px;
background:#f9f9f9;
}
.card {
    border-radius: 6px;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    box-shadow: 0 25px 20px -21px rgba(0,0,0,0.57);
    margin-top:30px;
}
.card-background {
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.card-background .image {
    border-radius: 6px;
}
.card .image {
    width: 100%;
    overflow: hidden;
    height: 260px;
    border-radius: 6px 6px 0 0;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.card .image img {
    width: 100%;
}

.card-background .filter {
    opacity: 0.20;
    filter: alpha(opacity=20.00000000000001);
    border-radius: 6px;
}
.card .filter {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.68);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.card-background:hover .filter {
    opacity: 0.65;
    filter: alpha(opacity=65);
}
.card-background .content, .card-background .footer {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
}
.card .content {
    padding: 15px 15px 10px 15px;
}
.card-background .price {
    margin: 0;
    color: #ffffff;
    font-weight:normal;
}
.card-background .title {
    margin-top: 30px;
    font-weight: 400;
}
.card-background .title, .card-background .stats, 
.card-background .category, 
.card-background .description, 
.card-background small, .card-background a {
    color: #ffffff;
}
.card .title {
    margin: 0 0 10px 0;
    color: #333333;
    font-weight: 300;
}
.card-background .footer {
    bottom: 0;
    top: auto;
    padding: 10px 15px;
    width: 100%;
    line-height: 40px;
    color: #ffffff;
}
.card .footer div {
    display: inline-block;
}
.card .author {
    font-size: 12px;
    text-transform: uppercase;
}
                                    

Similar snippets

Bootstrap snippet bs4 contact cards

bs4 contact cards

View

Bootstrap snippet Most Recent Signups panel

Most Recent Signups panel

View

Bootstrap snippet bs4 user cards with overlay

bs4 user cards with overlay

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Dec 25th 2015, 00:28

Views: 2.5K

Rated 5/5 based on 4 reviews