title: Fluid Image Rollover Twitter Bootstrap Rails
body: <p>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 <code>.photo</code> class but I'm unsure of how to fix it or if there is a better way to implement my desired result?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;% @photos.each do |photo| %&gt;
  &lt;div class="photo row"&gt;
    &lt;div class="span8 photo"&gt;&lt;%= image_tag photo.image_url(:large).to_s %&gt;&lt;/div&gt;
    &lt;div class="span4 hover"&gt;
      &lt;div class="bg"&gt;&lt;/div&gt;
      &lt;div class="description"&gt;
        &lt;h4&gt;&lt;%= link_to photo.title, photo_path(photo) %&gt;&lt;/h4&gt;
        &lt;hr&gt;
        &lt;p&gt;&lt;%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code> .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;
    }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>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 */
  </code></pre>