title: Video Hover Effect
body: <p>I am trying to make a video hover effect on an image which is when on mouse over it should pop up a video just like the one in this <a href="http://www.videocopilot.net/tutorials/." rel="nofollow">website</a></p>
  
  <p>I have been trying to find a solution to this problem for the last couple of months.</p>
  
  <p>Does anyone know how to do it?</p>
  
  <p>This is actually an image hover effect which i have managed to get.So instead of the image popping up, is there any way for a video to pop up just like the image?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;script type="text/javascript" src="js/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  
  $(document).ready(function () {
  
  
      $('div.thumbnail-item').mouseenter(function(e) {
  
  
          x = e.pageX - $(this).offset().left;
          y = e.pageY - $(this).offset().top;
  
  
          $(this).css('z-index','15')
          .children("div.tooltip")
          .css({'top': y + 10,'left': x + 20,'display':'block'});
  
      }).mousemove(function(e) {
  
  
          x = e.pageX - $(this).offset().left;
          y = e.pageY - $(this).offset().top;
  
  
      $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
  
      }).mouseleave(function() {
  
  
          $(this).css('z-index','1')
          .children("div.tooltip")
          .animate({"opacity": "hide"}, "fast");
      });
  
  });
  
  
  &lt;/script&gt;
  &lt;style&gt;
  
      .thumbnail-item { 
  
  position: relative; 
  float: left;  
  margin: 0px 5px; 
       }
  
        .thumbnail-item a { 
  display: block; 
        }
  
       .thumbnail-item img.thumbnail {
  border:3px solid #ccc;  
       }
  
         .tooltip { 
  
  display: none; 
  
  position: absolute; 
  
  padding: 8px 0 0 8px; 
         }
  
  .tooltip span.overlay { 
  
      background: url(images/overlay.png) no-repeat; 
  
      position: absolute; 
      top: 0px; 
      left: 0px; 
      display: block; 
      width: 350px; 
      height: 200px;
  }
  &lt;/style&gt;
     &lt;/head&gt;
      &lt;body&gt;
  
  
  
  &lt;div class="thumbnail-item"&gt;
      &lt;a href="#"&gt;&lt;img src="images/Capture1.jpg" class="thumbnail"/&gt;&lt;/a&gt;
      &lt;div class="tooltip"&gt;
          &lt;img src="images/2 Davis Road.jpg" alt="" width="330" height="185" /&gt;
          &lt;span class="overlay"&gt;&lt;/span&gt;
      &lt;/div&gt; 
  &lt;/div&gt; 
  
  &lt;div class="thumbnail-item"&gt;
      &lt;a href="#"&gt;&lt;img src="images/Capture2.jpg" class="thumbnail"/&gt;&lt;/a&gt;
      &lt;div class="tooltip"&gt;
          &lt;img src="images/Camberwell Town Hall, Roof Restoration.jpg" alt="" width="330" height="185" /&gt;
          &lt;span class="overlay"&gt;&lt;/span&gt;
      &lt;/div&gt; 
  &lt;/div&gt; 
  
  &lt;div class="thumbnail-item"&gt;
      &lt;a href="#"&gt;&lt;img src="images/Capture3.jpg" class="thumbnail"/&gt;&lt;/a&gt;
      &lt;div class="tooltip"&gt;
          &lt;img src="images/Children.jpg" alt="" width="330" height="185" /&gt;
          &lt;span class="overlay"&gt;&lt;/span&gt;
      &lt;/div&gt; 
  &lt;/div&gt;      
  
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
  </p>