class tanımlaması ile resim üzerine ikon ekleme ?

wp kod yapısını bilmediğim için böyle birşey yaptım.

.aycan{width:300px; height: 300px; text-decoration:none; background: url(https://www.r10.net/images/misc/vbulletin3_logo_white.gif);}
.aycan a{ width: 300px; height: 300px; display: block;}
.aycan a:hover{background: url(https://www.r10.net/images/buttons/reply.gif) no-repeat 100px 140px;}



<div class="aycan">
<a href="#"></a>
</div>

galiba demek istediğiniz böyle birşey? eğer illa resim üzerine gelince icon çıkacak diyorsanız o ie yanlı tarayıcılarda sorun verir JS ile yapmak lazım .

Eğer div yapısını verirseniz boş bir zamanımda JS olarak yapabilirim.

evet sizin verdiğiniz benim istediğim gibi ama wp ye uygun olmuyor çünkü img olarak var bende siz css ile resim atmışınız. umarım yardımcı olursunuz buna çok ihtiyacım var

<div class="item">
<p>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("thumbs"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>
</p>
</div>

css

.item {
    width: 128px;
    height: 129px;
    float: left;
    font-size: 12px;
    margin: 8px 20px 0 0;
    padding-left: 10px;
    padding-bottom: 80px;
    text-align: center;
}

.item p {
    margin: 0;
}

.item p a, .item p a:visited {
    border: 0px solid #B5B5B5;
    padding: 0px;
    width: 128px;
    height: 129px;
}

.item a, .item a:visited {
    clear: both;
    display: block;
    margin: 0;
}

.item img {
    width: 128px;
    height: 129px;
}

İ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.

Çok teşekkür ederim, Allah razı olsun ++ (: