Bootstrap Grids:

Bootstrap Photo Grids with Text and Hover Effect

Every website needs to have good content and an attractive appearance. A website might have great content but with no theme and simple design, the users simply do not consider the site professional and might not even want to stay in the site for long. Adding features such photo grids with proper effects to your website can help increase the responsiveness of your site. It will also help organize the pages and give them some kind of an order. This will make your website look professional and more beautiful. It is important for your website to be able to attract people’s attention.

Here in this post, we are sharing a code for a Bootstrap grid with transition. The template features the neatly designed square box in a single column in which you can insert both an image and text content. Half of the square box in this Bootstrap grid card is taken up with a dark transparent background which the text is written on and the other half is the image. This CSS grid move template also features a hover effect. This Bootstrap card with grid can be extremely useful in the front page of your website where you want to display all your latest posts in a list.

Bootstrap Card with grid

Bootstrap Grid with Transition

CSS Grid Move

Bootstrap Grid Card

<!-- This script got from frontendfreecode.com -->
<div class="container">
        <div class="row">
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <a href="">
                                        <strong>Ocean</strong>
                                        </a>        
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Customs House Brokers Import
                                                Compliance/<br>Clearance</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Multi-Modal/ Door-to-Door Foreign to Foreign</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <a href="">
                                        <strong>Air</strong>
                                        </a>        
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Freight Forwarder/ Export Compliance</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Projects/ Specialized<br>Cargo</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <a href="">
                                        <strong>Surface</strong>
                                        </a>        
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Other Regulatory and Compliance Services</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Warehousing and Distribution</strong>
                                </figcaption>
                        </figure>
                </div>
        </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

body {
    font-family: 'Open Sans Condensed', sans-serif;
}


figure {
    position: relative;
    width: 100%;
    min-height: 160px;
    display: block;
    float: left;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: inset 0px 2px 3px rgba(0,0,0,.2);
    -webkit-transition: all .15s ease-in-out;
}

.ocean {
    background-color: #000;
    background-image: url("http://frontendfreecode.com/codes/files/ship.jpg");
    background-size: cover;
    background-position: center center;
}

figcaption {
    display: block;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(0,0,0,.7);
    width: 55%;
    height: 100%;
    margin: 0 0 0 -20px;
    ;
    padding: 20px;
    padding-left: 40px;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -webkit-transition: all .15s ease-in-out;
}

    figcaption a, figcaption a:hover {
        color: #FFF;
        text-decoration: none;
    }

    figcaption strong {
        display: block;
        word-wrap: normal;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg);
    }

        figcaption strong:before {
            content: " ";
            border-top: solid 3px rgba(211,29,26,1);
            width: 140%;
            display: block;
            clear: both;
            margin-bottom: 20px;
            -webkit-transition: all .15s ease-in-out;
        }

/* HOVERS */
figure:hover figcaption {
    background-color: rgba(211,29,26,.9);
    -webkit-transition: all .15s ease-in-out;
}

    figure:hover figcaption strong:before {
        width: 200%;
        border-color: #FFF;
        -webkit-transition: all .15s ease-in-out;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

body {
    font-family: 'Open Sans Condensed', sans-serif;
}


figure {
    position: relative;
    width: 100%;
    min-height: 160px;
    display: block;
    float: left;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: inset 0px 2px 3px rgba(0,0,0,.2);
    -webkit-transition: all .15s ease-in-out;
}

.ocean {
    background-color: #000;
    background-image: url("http://frontendfreecode.com/codes/files/ship.jpg");
    background-size: cover;
    background-position: center center;
}

figcaption {
    display: block;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    color: #FFF;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(0,0,0,.7);
    width: 55%;
    height: 100%;
    margin: 0 0 0 -20px;
    ;
    padding: 20px;
    padding-left: 40px;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -webkit-transition: all .15s ease-in-out;
}

    figcaption a, figcaption a:hover {
        color: #FFF;
        text-decoration: none;
    }

    figcaption strong {
        display: block;
        word-wrap: normal;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg);
    }

        figcaption strong:before {
            content: " ";
            border-top: solid 3px rgba(211,29,26,1);
            width: 140%;
            display: block;
            clear: both;
            margin-bottom: 20px;
            -webkit-transition: all .15s ease-in-out;
        }

/* HOVERS */
figure:hover figcaption {
    background-color: rgba(211,29,26,.9);
    -webkit-transition: all .15s ease-in-out;
}

    figure:hover figcaption strong:before {
        width: 200%;
        border-color: #FFF;
        -webkit-transition: all .15s ease-in-out;
    }
</style>

</head>
<body>
<div class="container">
        <div class="row">
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <a href="">
                                        <strong>Ocean</strong>
                                        </a>        
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Customs House Brokers Import
                                                Compliance/<br>Clearance</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Multi-Modal/ Door-to-Door Foreign to Foreign</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <a href="">
                                        <strong>Air</strong>
                                        </a>        
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Freight Forwarder/ Export Compliance</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Projects/ Specialized<br>Cargo</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <a href="">
                                        <strong>Surface</strong>
                                        </a>        
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Other Regulatory and Compliance Services</strong>
                                </figcaption>
                        </figure>
                </div>
                <div class="col-md-4 col-sm-6">
                        <figure class="ocean">
                                <figcaption>
                                        <strong>Warehousing and Distribution</strong>
                                </figcaption>
                        </figure>
                </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