text: Q:
  
  Remove white space from image
  
  please take a look at this fiddle :
  http://jsfiddle.net/cX47v/1
  I am simply trying to preserve the effect that you see, but i want to remove the white space below the image. I know about display:block, but if i do it, the hover effect does not work. Any ideas on how to fix that ?
  
  A:
  
  Changing the HTML to what I have below (adding the style="font-size:0") fixes the issue in Chrome, Firefox, IE9 and Safari.  I've seen this issue before where a browser assumes one row of text as some extra height, even where there is no visible text.
  <div class='fancy_image'>
      <div class='shadow' style='border:2px solid; float:left;padding:5px;margin:10px;'>
          <div style="font-size: 0;">    
              <img class='fade' src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width=300 height=200  />
          </div>
      </div>
  </div>
  
  You can see it work here: http://jsfiddle.net/jfriend00/8FkmG/.  The remaining white space around the image is controlled by the padding in your HTML.
  Overall, your HTML/CSS is really screwy here mixing float and positioning and doing positioning on a span.  Very odd.
  
  