Fluid Image Rollover Twitter Bootstrap Rails

Question

I've started creating a rollover image effect for a Rails application I'm working on. I'm using the twitter-bootstrap-rails gem to keep the application looking good across devices. The problem I'm having with my current implementation is that when the browser is resized the image no longer resizes to width of the browser and the rollover effect breaks out of the borders of the image. The problem I think stems from the .photo class but I'm unsure of how to fix it or if there is a better way to implement my desired result?

HTML

<% @photos.each do |photo| %>
<div class="photo row">
  <div class="span8 photo"><%= image_tag photo.image_url(:large).to_s %></div>
  <div class="span4 hover">
    <div class="bg"></div>
    <div class="description">
      <h4><%= link_to photo.title, photo_path(photo) %></h4>
      <hr>
      <p><%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %></p>
    </div>
  </div>
</div>
<% end %>

CSS:

 .photo {
    position: relative;
    width: 770px;
  }

  .photo .hover {
    position: absolute;;
    height: 90.4%;
    left: 3.09%;
    top: 4.8%;
    width: 93.82%;
    display: none;
  }

  .photo .hover .bg {
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
    background: #FFF;
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    filter:alpha(opacity=80);
    opacity: 0.8;
  }

  .photo .hover .description {
    position: relative;
    text-align: center;
    top: 40%;
    z-index: 2;
  }

JS

jQuery(document).ready(function($) {


  $(".photo").mouseenter(function () {
      $(this).find('.hover').fadeIn(300);
  }).mouseleave(function (){ 
    $(this).find('.hover').stop(true, true).fadeOut(300);
  });

}); /* End Dom Ready */

Answer 1

Bootstrap uses media queries to resize the span8. So we need to rearrange the html to include the hover elements within the span8 and then use percentages for the dimensions to retain the aspect ratio relative to the photo.

HTML

<% @photos.each do |photo| %>
<div class="row">
  <div class="span8 photo">
    <%= image_tag photo.image_url.to_s %>
    <div class="hover">
      <div class="bg"></div>
      <div class="description">
        <h4><%= link_to photo.title, photo_path(photo) %></h4>
        <hr>
        <p><%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %></p>
      </div>
    </div>
  </div> 
</div>
<% end %>

CSS

.photo {
  position: relative;
}

.photo .hover {
  position: absolute;
  height: 90%;
  width: 94%;
  top: 0;
  left: 0;
  padding: 3%;
  display: none;
}

.photo .hover .bg {
  z-index: 1;
  position: relative;
  height: 100%;
  width: 100%;
  background: #FFF;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
  opacity: 0.8;
}

.photo .hover .description {
  position: absolute;
  text-align: center;
  top: 40%;
  width: 94%;
  height: 90%;
  z-index: 2;
}