通过Bootstrap使div带有图像/文本悬停叠加层的完全响应

Question

I have hit a snag in my design and have exhausted my options on it. Essentially I'm designing through the Bootstrap framework to make a set of images that have a hover overlay effect applied to each one. The effect and the responsive images work fine when separated but when combined, I lose the responsiveness to it and it stays fixed to its 300px x 250px size.

This is the type of effect I am trying to achieve ( http://mikekus.com/portfolio )

Ive added my code into jsfiddle: http://jsfiddle.net/2BuDG/ without the bootstrap.css (since it's a huge file)

HTML

<div class="container-fluid">
<div class="row">


<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3"> 
<div class="view view-first">  
     <img src=" SOURCE " class="img-responsive"/>  
 <div class="mask">  
 <h2>Vector Illustrations</h2>  
 <p>Illustration, Print, Digital Art</p>  
     <a href="#" class="portfolioButton">View Project</a>  
 </div>  
</div>  
</div>

CSS

.view {

   width: 300px;
   height: 250px;
   margin: 10px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {

   width: 300px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
  display: block;
  max-width: 100%;
  height: 100%; 

}

I like how the "img-responsive" class for the default img bootstrap class works but with the addition of the overlay div, it's not working. I think I'm almost there but I've brain farted on this hard. Thanks in advance!

Answer 1

If you take a look at the code of the portfolio you linked to, you'll see:

<li>
    <a href="/portfolio/Title">
    <img src="SOURCE" class='js-img'>
        <div class="excerpt">
            <h3>Title</h3>
            <p>Blah blah blah</p>
        </div>
    </a>
</li>

The author never assigns a fixed width or height to the <li> elements. He sets width: 25% to keep four images per row and assigns max-width: 480px He also sets width: 100% on the <img> elements.

He uses media queries to change both the width and max-width of the <li> elements dependent on the screen size. You can use the following portion of Bootstrap to help you create those media query breakpoints for resizing your portfolio elements:

http://getbootstrap.com/css/#grid-less

And you'll probably want to set your divs and imgs to a variable percentage based widths instead of fixed.