Bootdey new snippets cards

Bootstrap snippet. Bootdey new snippets cards, this snippet 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 project list with progress

bs4 project list with progress

View

Bootstrap snippet bs4 Home Contacts

bs4 Home Contacts

View

Bootstrap snippet bs4 widget image cards

bs4 widget image cards

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Dec 25th 2015, 00:28

Views: 2.6K

Rated 5/5 based on 5 reviews