İstediğiniz özelliği jQuery ile yaptım final haftam o yüzden biraz acele ve amatörce oldu
jquery açılır menu kısımında paylaştığım jQuery kodları ile yaptım buyrun :
Öncelikle o item div'i nerede ise oraya
jquery dosyası eklemeniz lazım
<script src="jquery.js" type="text/javascript"></script>
sonra hemen altına şu kodları <script></script> tagları arasına eklemeniz lazım
<script type="text/javascript">
$(document).ready(function(){
$(".item p a").hover(function(){
$(this).parent().find(".kucuk").fadeIn('fast');
$(this).parent().hover(function() {}, function(){$(this).parent().find(".kucuk").fadeOut('fast');});
});
});
</script>Sonra css kodlarınıza şu class'ı ekleyin.
img.kucuk{
margin:0;
padding: 0;
border:0;
position: absolute;
width: 50px;
height: 50px;
top:50px;
left:50px;
display: none;
}sonra
.item adlı class'ınıza şununla değişitirin.
.item {
width: 128px;
height: 129px;
float: left;
font-size: 12px;
margin: 8px 20px 0 0;
padding-left: 10px;
padding-bottom: 80px;
text-align: center;
position: relative;
z-index: 1;
}sonra sadece sizin bana vermiş olduğunuz html kodları arasına şu div'i koymak gerekiyor.
<div class="item">
<p>
<a href="#" title="1234">
<img src="http://www.aycan.net/blog/wp-content/themes/headlines/images/logo.png" alt="#" />
<img src="https://www.r10.net/images/buttons/reply.gif" class="kucuk"/>
</a>
</p>
</div>Burada içi boş div açıp kapatmak semantik değil ama hazır sisteme acele ile bu şekilde ekleme yapabildim.
örnek sayfa verecek olursak
http://aycan.net/Ek/jqueryDenemesi.html
Css kısımında kaymalar olursa artık düzeltirsiniz.