gallery hover effects

application.css.scss

d;
   }
   
.gallery-slideshow-caption {
  width:300px;
  height:298px;
  float: right;
  left:880px; 
  color:#fff;
  background: $red;
  z-index:500;
  opacity: 0.4;
  }

.gallery-slideshow-caption .slideshow-caption-container {
  padding:5px 10px;   
  z-index:1000;   
  }

.gallery-slideshow-caption h3 {
  margin:0;
  padding-top:10px;
  font-size:18px;
  color: #fff;
  line-height: 105%;
  }

.gallery-slideshow-caption p {
  margin:5px 0 0 0;
  padding-top:10px;
  font-size:14px;
  font-weight: bold;
  }

application.js

 // SlideGallery
 
 $(function() {
    $("a.slide_gallery").hover(function() {

      var image = $(this).attr("rel");
      var title = $(this).attr("title");
      var desc = $(this).attr("alt");        

      $('#slide_gallery').fadeIn('fast');
      $('#slide_gallery img').attr('src', image)
      $('#slide_gallery img').attr('alt', title)
      $('#slide_gallery img').attr('title', desc)

      $('#slide_gallery div h3').html($(this).attr('title'));
      $('#slide_gallery div p').html($(this).attr('alt'));

      // make the caption appear
      $('#slide_gallery div.gallery-slideshow-caption').fade("slow")

      return false;
    });
});

index.html.erb

     <%= image_tag(@first_image.image_url(:slide_gallery))  %>
    <div class="gallery-slideshow-caption">
      <div class="slideshow-caption-container">
        <h3><%= @first_image.name %></h3>
        <p><%= @first_image.description %></p>
      </div>
    </div>
  </div>
 
 
 
   <div class="slide_gallery">
     <ul>         
     <% @images.each do |image| %> 
         <li>
          <a href="javascript:void(0)" rel="<%= image.image_url(:slide_gallery) %>" class="slide_gallery" title="<%= image.name %>" alt="<%= truncate(image.description, :length => 300) %>">
            <%= image_tag(image.image_url(:thumb)) %>
          </a>
        </li>
     <% end %>
    </ul>
   </div>