Bootstrap Cards:

Bootstrap Cards with Hovering Zoom Effect

Cards are perfect design elements in a website if you want to display information in a limited space. A good usage of website cards is for photographers and similarly graphic designers. They can use cards to showcase their portfolio which will attract the clients and invites them to do business with you. Especially since cards are considered more professional choices than a simple list or grid view. You can use your creativity and innovation to make your cards further interesting which will have a bigger impact on your customers. Basically, cards are the best method available to display important information right now. It makes it so that the users are interested to know more detailed information about the card they see. So, try to design your Bootstrap cards as interesting as possible.

Following is a code for a Bootstrap card style template designed to help you get your website started. The CSS card style provided in this post features a grid view with long square boxes. Each box has space for an image, a title and some condensed information about the card. This Bootstrap card effect also features a hover effect so when you hover your mouse over an item it zooms on that particular box.

Bootstrap Card Style

CSS Card Style

Bootstrap Card

Bootstrap Card Effect

<!-- This script got from frontendfreecode.com -->
<div id="cards_landscape_wrap-2">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-sm-6 col-md-3 col-lg-3">
                <a href="">
                    <div class="card-flyer">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="http://frontendfreecode.com/img/deer.jpg" alt="" />
                            </div>
                            <div class="text-container">
                                <h6>Title 01</h6>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xs-4 col-sm-6 col-md-3 col-lg-3">
                <a href="">
                    <div class="card-flyer">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="http://frontendfreecode.com/img/low-poly.jpg" alt="" />
                            </div>
                            <div class="text-container">                                    
                                <h6>Title 02</h6>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xs-4 col-sm-6 col-md-3 col-lg-3">
                <a href="">
                    <div class="card-flyer">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="http://frontendfreecode.com/img/poly.jpg" alt="" />
                            </div>

                            <div class="text-container">
                                <h6>Title 03</h6>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

#cards_landscape_wrap-2 {
    text-align: center;
    background: #F7F7F7;
}
#cards_landscape_wrap-2 .container {
    padding-top: 5px;
    padding-bottom: 10px;
}
#cards_landscape_wrap-2 a {
    text-decoration: none;
    outline: none;
}
#cards_landscape_wrap-2 .card-flyer {
    border-radius: 5px;
}
#cards_landscape_wrap-2 .card-flyer .image-box {
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
    border-radius: 5px;
}
#cards_landscape_wrap-2 .card-flyer .image-box img {
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    width: 100%;
    height: 200px;
}
#cards_landscape_wrap-2 .card-flyer:hover .image-box img {
    opacity: 0.7;
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}
#cards_landscape_wrap-2 .card-flyer .text-box {
    text-align: center;
}
#cards_landscape_wrap-2 .card-flyer .text-box .text-container {
    padding: 30px 18px;
}
#cards_landscape_wrap-2 .card-flyer {
    background: #FFFFFF;
    margin-top: 50px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
}
#cards_landscape_wrap-2 .card-flyer:hover {
    background: #fff;
    box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    margin-top: 50px;
}
#cards_landscape_wrap-2 .card-flyer .text-box p {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #000000;
}
#cards_landscape_wrap-2 .card-flyer .text-box h6 {
    margin-top: 0px;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Roboto Black', sans-serif;
    letter-spacing: 1px;
    color: #00acc1;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
#cards_landscape_wrap-2 {
    text-align: center;
    background: #F7F7F7;
}
#cards_landscape_wrap-2 .container {
    padding-top: 5px;
    padding-bottom: 10px;
}
#cards_landscape_wrap-2 a {
    text-decoration: none;
    outline: none;
}
#cards_landscape_wrap-2 .card-flyer {
    border-radius: 5px;
}
#cards_landscape_wrap-2 .card-flyer .image-box {
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
    border-radius: 5px;
}
#cards_landscape_wrap-2 .card-flyer .image-box img {
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    width: 100%;
    height: 200px;
}
#cards_landscape_wrap-2 .card-flyer:hover .image-box img {
    opacity: 0.7;
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}
#cards_landscape_wrap-2 .card-flyer .text-box {
    text-align: center;
}
#cards_landscape_wrap-2 .card-flyer .text-box .text-container {
    padding: 30px 18px;
}
#cards_landscape_wrap-2 .card-flyer {
    background: #FFFFFF;
    margin-top: 50px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
}
#cards_landscape_wrap-2 .card-flyer:hover {
    background: #fff;
    box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    margin-top: 50px;
}
#cards_landscape_wrap-2 .card-flyer .text-box p {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #000000;
}
#cards_landscape_wrap-2 .card-flyer .text-box h6 {
    margin-top: 0px;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Roboto Black', sans-serif;
    letter-spacing: 1px;
    color: #00acc1;
}
</style>

</head>
<body>
<div id="cards_landscape_wrap-2">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-sm-6 col-md-3 col-lg-3">
                <a href="">
                    <div class="card-flyer">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="http://frontendfreecode.com/img/deer.jpg" alt="" />
                            </div>
                            <div class="text-container">
                                <h6>Title 01</h6>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xs-4 col-sm-6 col-md-3 col-lg-3">
                <a href="">
                    <div class="card-flyer">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="http://frontendfreecode.com/img/low-poly.jpg" alt="" />
                            </div>
                            <div class="text-container">                                    
                                <h6>Title 02</h6>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xs-4 col-sm-6 col-md-3 col-lg-3">
                <a href="">
                    <div class="card-flyer">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="http://frontendfreecode.com/img/poly.jpg" alt="" />
                            </div>

                            <div class="text-container">
                                <h6>Title 03</h6>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS