Всплытие img при наведении на div
 

Доброго времени!
Помогите пожалуйста решить проблему с прозрачностью у изображений.
Изображение проявляется не по наведению на сам div (цифры), а как только затрагиваю сам img, по этому получается беспорядок.

Вот сам скрипт:

$('#box').find('.some-class-for-div').each(function (){
    $(this).data('op',$(this).css('opacity'));
  })
  .mouseover(function (){		
    $(this).animate({opacity: 1}, 500 );
  })
  .mouseout(function (){
    $(this).stop(true,true).animate({opacity: $(this).data('op')}, 500 );
  });

Html:

<div id="box">
  <div id="des1" class="some-class-for-div">1<img src="imgs/about1.png" id="about1" style="opacity: 0;"></div>
  <div id="des2" class="some-class-for-div">2<img src="imgs/about2.png" id="about2" style="opacity: 0;"></div>
  <div id="des3" class="some-class-for-div">3<img src="imgs/about3.png" id="about3" style="opacity: 0;"></div>
</div>

Вот как это выглядит:


Заранее, большое спасибо!:(

Android22, забыть про animate и читать про CSS transition. :)

Все бы хорошо, но даже css transition не помогает и всплытие происходит при наводке на границу какой либо картинки :(

Android22, что есть у тебя картинка ниче не понятно?

В примере выше выделил "картинки" разными цветами. Вот на ихние границы и действует trasition вместе и js, а мне нужно, что бы картинки всплывали именно при наведении на цифры. Как то так :(

Android22, так убери их из дивов где цифры чтобы они их не растягивали, а лучше нарисуй как должно быть...