<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript">
$(function() {  

     /**
     * اجعل الصور شبه شفافة في بداية الامر 
     */
     $(".latest_img").css("opacity","0.3");  
     
     /**
     * عندما يصبح مؤشر الفأرة على احد الصور...قم بوضع خاصية الشفافية الى 1 اي اجعل الصورة واضحة تماما
     */
     $(".latest_img").hover(function (){  
         $(this).stop().animate({opacity: 1.0}, "slow");
     },  
        
     /**
     * عندما يصبح مؤشر الفأرة بعيدا عن اي صورة..قم بجعل الصورة شبه شفافة
     */
     function () {  
        $(this).stop().animate({opacity: 0.3}, "slow");
     });
  
}); 
</script> 

 <div id="images-list"> <img src="01.png" alt="1" class="latest_img" /> <img src="02.png" alt="2" class="latest_img" /> <img src="03.png" alt="3" class="latest_img" /> <img src="04.png" alt="4" class="latest_img" /> </div>