Bootstrap 3 Site layout image grid

Question

Hi there I am putting together a site which has an image gallery with a hero image and smaller images

http://codepen.io/erswelljustin/pen/wBzVXJ

HTML

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <span class="navbar-brand brand-icon"><i class="fa fa-info"></i></span>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control navbar-search" placeholder="&nbsp;">
            </div>
        </form>
        <ul class="nav navbar-nav">
            <li><a href="#">Dashboard</a></li>
            <li class="active"><a href="#">Interviews</a></li>
            <li><a href="#">Purchases</a></li>
            <li><a href="#">Account</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right hidden-xs hidden-sm">
            <a class="navbar-brand" href="#">
                <img alt="Brand" class="user-avatar img-rounded" src="je.jpg">
            </a>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 sidebar hidden-xs hidden-sm">
            <div class="show-filter">
                <h2><span>Show</span></h2>
                <div class="filter-block text-center">
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-filter active">All</button>
                        <button type="button" class="btn btn-filter">Latest</button>
                        <button type="button" class="btn btn-filter">Popular</button>
                    </div>
                </div>
            </div>
            <div class="filters">
                <h2><span>Filters</span></h2>
                <div class="filter-block">
                    <button type="button" class="btn btn-filter">Film</button>
                    <button type="button" class="btn btn-filter">Sports</button>
                    <button type="button" class="btn btn-filter">Television</button>
                    <button type="button" class="btn btn-filter">Actor</button>
                    <button type="button" class="btn btn-filter">Musician</button>
                    <button type="button" class="btn btn-filter">Art</button>
                    <button type="button" class="btn btn-filter">Polotics</button>
                    <button type="button" class="btn btn-filter">Actress</button>
                    <button type="button" class="btn btn-filter">Lifestyle</button>
                    <button type="button" class="btn btn-filter">Pop</button>
                </div>
            </div>
            <div class="info">
                <h2><span>Info</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col-md-9 col-md-offset-3 main">
            <div class="main-header">
                <div class="row">
                    <div class="col-md-11">
                        <h2>All Interviews</h2>
                    </div>
                    <div class="col-md-1">
                        <div class="view-switcher pull-right"><i class="fa fa-th"></i></div>
                        <div class="view-switcher pull-right inactive"><i class="fa fa-th-list"></i></div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <div class="row">
                    <div class="col-md-6">
                        <span class="img-responsive hero-image" style="background-image: url('http://media.melty.fr/article-2004405-ajust_930/chris-hemsworth-va-etre-comble.jpg');">
                            <div class="item-title-hero">
                                <h2>Chris Hemsworth</h2>
                                <span class="item-subtitle-hero">
                                    The Avengers: Age of Ultron
                                </span>
                            </div>
                            <div class="item-image-count">
                                <i class="fa fa-camera"></i> 3
                            </div>
                        </span>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://i.dailymail.co.uk/i/pix/2014/09/23/1411504187666_wps_53_blake_lively_guy_aroch_ph.jpg');">
                                    <div class="item-title">
                                        <h2>Blake Lively</h2>
                                        <span class="item-subtitle">
                                            Health and Career With&hellip;
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 4
                                    </div>
                                </span>
                            </div>
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://cdn.images.express.co.uk/img/dynamic/79/590x/david_beckham_lead-434102.jpg');">
                                    <div class="item-title">
                                        <h2>David Beckham</h2>
                                        <span class="item-subtitle">
                                            Life after football
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 2
                                    </div>                                      
                                </span>
                            </div>
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/7b/Ryan_Gosling_-_Cannes_Film_Festival_-_01.jpg');">
                                    <div class="item-title">
                                        <h2>Ryan Gosling</h2>
                                        <span class="item-subtitle">
                                            I'm a sexy man
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 1
                                    </div>                                      
                                </span>
                            </div>
                            <div class="col-md-6 bordered">
                                <span class="img-responsive grid-image" style="background-image: url('http://assets8.heart.co.uk/2014/05/kelly-brook-new-look-lingerie-2014-2-1391522988-view-0.jpg');">
                                    <div class="item-title">
                                        <h2>Kelly Brook</h2>
                                        <span class="item-subtitle">
                                            Does my bum look big
                                        </span>
                                    </div>
                                    <div class="item-image-count">
                                        <i class="fa fa-camera"></i> 10
                                    </div>                                      
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://hep.mobi/wp-content/uploads/rocket-raccoon-bradley-cooper-11.jpg');">
                            <div class="item-title">
                                <h2>Bradley Cooper</h2>
                                <span class="item-subtitle">
                                    Hungover? nah limitless
                                </span>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://www.billboard.com/files/styles/promo_650/public/media/do-no-reuse-taylor-swift-the-beat-bb36-sarah-barlow-billboard-650.jpg');">
                            <div class="item-title">
                                <h2>Taylor Swift</h2>
                                <span class="item-subtitle">
                                    Life songs and fame
                                </span>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://www.vanyaland.com/wp-content/uploads/2014/09/Rihanna-4-1170x731.jpg');">
                            <div class="item-title">
                                <h2>Rhianna</h2>
                                <span class="item-subtitle">
                                    Umberella, ella eh?
                                </span>
                            </div>
                        </span>
                    </div>
                    <div class="col-md-3 bordered">
                        <span class="img-responsive grid-image" style="background-image: url('http://the-talks.com/wp-content/uploads/2012/01/Ewan-McGregor-001.jpg');">
                            <div class="item-title">
                                <h2>Ewan McGregor</h2>
                                <span class="item-subtitle">
                                    Use the force!
                                </span>
                            </div>
                        </span>
                    </div>                      
                </div>
            </div>
        </div>
    </div>
</div>

CSS

*/

html, body {
    margin: 0px;
    padding: 0px;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    font-family:'AvenirNextLTW01-Regular'
}
.container-fluid {
    height: 100%;
    margin-top: 50px;
}

/* Custom Bootstrap Styles */
.navbar-custom {
    background-color: #404040;
    border-color: #2f2f2f;
    border-radius: 0px !important;
}
.navbar-custom .navbar-brand {
    color: #7f7f7f;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
    color: #666666;
    background-color: transparent;
}
.navbar-custom .navbar-text {
    color: #7f7f7f;
}
.navbar-custom .navbar-nav > li:last-child > a {
    border-right: 1px solid #404040;
}
.navbar-custom .navbar-nav > li > a {
    color: #7f7f7f;
    border-left: 1px solid #404040;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #404040;
}
.navbar-custom .navbar-nav > .disabled > a, .navbar-custom .navbar-nav > .disabled > a:hover, .navbar-custom .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
}
.navbar-custom .navbar-toggle {
    border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
    background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
    background-color: #cccccc;
}
.navbar-custom .navbar-collapse, .navbar-custom .navbar-form {
    border-color: #2e2e2e;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret, .navbar-custom .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus {
    background-color: #2f2f2f;
    color: #ffffff;
}
.navbar-custom .navbar-nav > .open > a .caret, .navbar-custom .navbar-nav > .open > a:hover .caret, .navbar-custom .navbar-nav > .open > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
    border-top-color: #7f7f7f;
    border-bottom-color: #7f7f7f;
}

.btn-filter {
    color: #FFFFFF;
    background-color: #40D1B0;
    border-color: #FFFFFF;
    height: 26px;
    padding-top: 2px;
    border-radius: 0px;
    box-shadow: none !important;
    text-transform: uppercase;
    margin: 4px 0px;
    font-family:'AvenirNextLTW01-Medium';
    font-style: 8px !important;
}
.btn-filter:hover, .btn-filter:focus, .btn-filter:active, .btn-filter.active, .open .dropdown-toggle.btn-filter {
    color: #40D1B0;
    background-color: #FFF;
    border-color: #FFFFFF;
}
.btn-filter:active, .btn-filter.active, .open .dropdown-toggle.btn-filter {
    background-image: none;
}
.btn-filter.disabled, .btn-filter[disabled], fieldset[disabled] .btn-filter, .btn-filter.disabled:hover, .btn-filter[disabled]:hover, fieldset[disabled] .btn-filter:hover, .btn-filter.disabled:focus, .btn-filter[disabled]:focus, fieldset[disabled] .btn-filter:focus, .btn-filter.disabled:active, .btn-filter[disabled]:active, fieldset[disabled] .btn-filter:active, .btn-filter.disabled.active, .btn-filter[disabled].active, fieldset[disabled] .btn-filter.active {
    background-color: #40D1B0;
    border-color: #FFFFFF;
}
.btn-filter .badge {
    color: #40D1B0;
    background-color: #FFFFFF;
}
.btn-filter .active {
    color: #40D1B0;
    background-color: #FFF;
    border-color: #FFFFFF;
}



.navbar-search {
    border-radius: 20px;
    height: 30px;
    background-color: #404040;
    font-size: 14px;
    outline: none;
    box-shadow:none !important;
    border:1px solid #7f7f7f !important;
    transition: all 0.9s ease;
    margin-top: 2px;
    width: 279px !important;
}

.navbar-search::-webkit-input-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
.navbar-search::-moz-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
/* firefox 19+ */

.navbar-search:-ms-input-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
/* ie */

.navbar-search:-moz-placeholder::before {
    font-family: 'fontAwesome';
    content: '\f002  ';
    color: #7f7f7f
}
.navbar-search:focus {
    outline: none;
    background-color: #fff;
    border-color: #7f7f7f;
}

.brand-icon {
    height: 30px;
    width: 30px !important;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 5px 12px 5px 12px;
    background-color: #40d1b0;
    color: #fff !important;
    border-radius: 6px;
    transition: all 0.9s ease
}
.brand-icon:hover {
    cursor: pointer;
    background-color: #34ab90;
}

.user-avatar {
    height: 30px;
    width: 30px;
    margin-top: -4px;
}

/*
* Sidebar Styles
*/
.sidebar {
    background-color: #40d1b0;
    height: 100%;
    position: fixed;
}
.sidebar h2 {
    color: #f7f7f7;
    width: 100%;
    font-size: 24px;
    position: relative;
}

.sidebar h2 span {
    background-color: #40d1b0;
    padding-right: 2px;
}
.sidebar h2:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.22em;
    border-top: 1px solid rgba(0,0,0,0.10);
    z-index: -1;
}

.filter-block {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 60px;
}

.sidebar p {
    font-family:'Minion W01 It';
    color: #f7f7f7;
}

/* Main Panel Styles */
.main h2 {
    font-size: 24px;
    color: #404040;
}

.view-switcher {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    color: #6b6b6b;
    border: 1px Solid #6b6b6b;
    padding: 2px 4px 0px 4px;
    margin-top: 16px;
    transition: all 0.9s ease
}
.view-switcher.inactive {
    color: #bbb;
    border-color: #bbb;
}

.view-switcher:hover {
    color: #40d1b0;
    border-color: #40d1b0;
    cursor: pointer;
}

.hero-image {
    width: 100%;
    max-width: 510px; 
    height: 497px; 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 4px;
}
.grid-image {
    width: 100%;
    max-width: 238px;
    height: 244px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 4px;
}

.bordered {
  margin-bottom: 10px;
}

.item-title-hero {
    bottom: 0px;
    text-align: center;
    background-color: rgba(0,0,0,0.20);
    border-radius: 4px;
    position: absolute;
    max-width: 510px;
    width: 100%;
    height: 100%;
}
.item-title-hero h2 {
    color: #f7f7f7;
    font-size: 32px;
    font-family: 'Avenir Next LT W01 Demi';
    width: 100%;
    bottom: 40px;
    position: absolute;
}
.item-title {
    bottom: 0px;
    text-align: center;
    background-color: rgba(0,0,0,0.20);
    border-radius: 4px;
    position: absolute;
    max-width: 238px;
    width: 100%;
    height: 100%;
}
.item-title h2 {
    color: #F7F7F7;
    font-size: 22px;
    font-family: "Avenir Next LT W01 Demi";
    width: 100%;
    bottom: 18px;
    position: absolute;
}
.item-subtitle-hero {
    bottom: 20px;
    position: absolute;
    color: #F7F7F7;
    width: 100%;
    max-width: 510px;
    left: 0px;
    font-family: "Minion W08 Md Cd It";
    font-size: 20px;
}
.item-subtitle {
    bottom: 6px;
    position: absolute;
    color: #F7F7F7;
    width: 100%;
    max-width: 238px;
    left: 0px;
    font-family: "Minion W08 Md Cd It";
    font-size: 16px;
}

.item-image-count {
    color: #F7F7F7;
    position: absolute;
    right: 30px;
    top: 6px;
    font-size: 20px
}

@media (max-width: 767) {
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
        color: #7f7f7f;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #2f2f2f;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #cccccc;
        background-color: transparent;
    }
}

.navbar-custom .navbar-link {
    color: #7f7f7f;
}
.navbar-custom .navbar-link:hover {
    color: #ffffff;
}

I am having a couple of problems here.

1. I need to make the images increase / decrease in size if the browser is at different sizes.
2. Connected to 1 I need to make the overlays stay in the correct place relative to their image boxes.

I have used background images as the images in this application will be different orientations and I need to make them consistent, I don't know if this the correct approach though.

The code is above but maybe to long so I have added a codeine link

My target is this

I think I am close but the CSS is a little beyond me can anyone help.

Answer 1

for first using

background-size:100%;

for second, to boostrap is no posible to desing you need, you have to create a custom view using porcent in your width and height, for why? bootstrap work to resposive desing, work to adapter,example to: cols-md-6 in view for example width 980px he have a value for 50%; in width display a 200px or lower cols-md-6 have a value for 100%

Answer 2

To create a hover effect on the images, add a id selector to the image tag and add the following css class.

#chrish:hover {
  -webkit-filter: grayscale(100%);
}


    <span id="chrish"class="img-responsive hero-image" style="background-image: url('http://media.melty.fr/article-2004405-ajust_930/chris-hemsworth-va-etre-comble.jpg');"></span>