/* general styling for this example */
* { margin: 0; padding: 0; }
 /* begin gallery styling */
 #jgal { list-style: none; width: 350px; float:right;}
 #jgal li { opacity: .5; float: left; display: block; width: 65px; height: 70px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-left: 14px; margin-bottom: 14px;  }
 #jgal li img { position:absolute; top:210px; left: 58px; display: none;  }
 #jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
 /* styling without javascript */
 #gallery { list-style: none; display: block;  }
 #gallery li { float: right; margin: 0 10px 10px 0; }
  <!--[if lt IE 8]>
   <style media="screen,projection" type="text/css">
   #jgal li { filter: alpha(opacity=50); }
    #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
   </style>
  <![endif]-->
  
  <!--[if lt IE 6]>
  <style media="screen,projection" type="text/css">#gallery { display: block; }</style>
  <![endif]-->