Responsive bootstrap thumbnails with mouseover animation captions

after a lot of searching i still haven't found what I was looking for. Here is what I need:

*8 responsive bootstrap thumbnails,2 rows, 4 in each row (4 Column Grid).

I use this col-xs-6 col-sm-6 col-md-3 to make it like this.

*When I hover on each thumbnail I want a caption on the thumbnail with text.

I looked all over the internet and nothing matched my site. I have an example for what I want here: http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html

But I couldn't figure out how to put it in my site. Any ideas?

Thanks in advance for anyone!

With a little bit of CSS and jquery, you can obtain the animation you are seeking.

Working bootply example

Basically, I kind of took the css from the link you posted and switched a few thing here and there. I added the css3 markup to take care of the easing for the animation and resize animation.

CSS:

.thumb{
    height:200px;
    background:#E6E6E6;
    position: relative;
    overflow: hidden;
    display: block;
    padding: 4px;
    line-height: 20px;
    border: 1px solid #ddd;
    webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.thumb .caption{
    padding: 9px;
    opacity:0;
    -moz-opacity: 0.5;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    color: #fff !important;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.second-container{
    margin-top: 20px;
}

Next, as for the bootstrap layout, I added two containers, with a row and full width (col-x-12) div in each. Inside each col-x-12, I added 4 columns which will display side-by-side until they hit the tablet threshold. In tablet mode they will display 2 columns side-by-side. And in mobile the will display as stacked on top of each other. Keep in mind, that you didn't specify much about the design, so you will have to adjust the css according to your design.

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Hello world
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Hello Kitty
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              G'day Mate
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              A jolly good day to you
            </div>
        </div>
    </div>
</div>

<div class="container second-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Bonjour cher ami!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Guten tag mein freund!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Hola amigo!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Hello my friend
            </div>
        </div>
    </div>
</div>

Finally, to trigger the animation, a simple JQuery hover mehod is all we need. On hover in, we target the thumbnail and look for a caption element. Once it is selected, we simply change the css 'opacity property'. On hover out, we reset the property. To make the animation slower, just change the 'css3 transition' value, ex: 'opacity 1s ease-in-out'

JQuery:

$('.thumb').hover(function(){
    $(this).find('.caption').css('opacity','1');
}, function(){
    $(this).find('.caption').css('opacity','0');
});

Hope this is what you are looking for.