Здравствуйте!
Помогите, пожалуйста, разобраться
Сайт: http://himawari.bbok.ru/
Шапка форума. При наведении на картинки появляется блок с текстом (ссылкой)
http://prntscr.com/heuo5i  ----> http://prntscr.com/heuojg
Сейчас все реализовано таким образом:
CSS

Код:

<style type="text/css">
.blogodel {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.blogodel:hover {cursor: pointer;}

.blogodel img {
   border: none;
  margin: 0;
 }

.blogodel .desc {display: none;}
.blogodel:hover .desc {
  background-color:#1B1710;
  display: block;
  margin: 0;
  color: #D0C9C1;
  padding: 5px;
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
  position: absolute;
  bottom: 10px; 
  right: 5px;
  top: 10px;
  left: 5px;
}

.blogodel:hover a { 
font-size: 14px;
  color: #D0C9C1;

}

.blogodel:hover a:hover { 
font-size: 14px;
  color: #AAB8AD;

}

.blogodel:hover .desc strong {
  display: block;
  font-size: 14px;
  line-height: 1em;
}
</style>

HTML

Код:

<div class="blogodel"><img src="http://se.uploads.ru/EWDgo.jpg" /><div class="desc"> <a href="http://himawari.bbok.ru/viewtopic.php?id=721#p20968">Kagawa Keiko </a></div></div>
<div class="blogodel"><img src="http://forumstatic.ru/files/000e/8d/9d/12483.jpg" /><div class="desc"> <a href="http://himawari.bbok.ru/viewtopic.php?id=721#p22101">Yang Mi Na</a></div></div>
<div class="blogodel"><img src="http://forumstatic.ru/files/000d/a4/84/63455.jpg" /><div class="desc"> <a href="http://himawari.bbok.ru/viewtopic.php?id=721#p20610">Jeremy </a></div></div>
<div class="blogodel"><img src="http://forumstatic.ru/files/000d/a4/84/13143.jpg" /><div class="desc"> <a href="http://himawari.bbok.ru/viewtopic.php?id=721#p21002">Kuratani Kenta </a></div></div>

Собственно, вопрос:
А можно ли сделать как-то так, чтобы блок с текстом появлялся и исчезал при наведении плавно, а не резко, как сейчас? А то у меня получается либо текст в блоке, либо плавное перекрытие цветом, без текста =С Совсем голову сломала