CSS İle resimlere rollover yazı efekti

Bu konuda sizlere  resmin uzerine mouse ile gelince yazi gosterme efektinin kodunu  paylasacagim...

ben ornek demosunu kitap ve kitapla ilgili yazi yazarak paylastim gerci yazi kitapla ilgili olmadi da siz ornek demoyu gormeniz icin sacmaladim biseyler hehe :)

bazi blog arkadaslarimiz bloglarinda yan taraflarda  bu aralar okudugum kitap yazarak alta kitabin resmini paylasiyorlar.. basit bi sekilde ama artik bloglarinizin daha guzel gorunmesi icin  elimden geldigi kadar eklentiler kodlar paylasiyorum :) o kodlardan biride bu konudaki kod

bu kodla okudugun kitabin  resmini ve kitapla ilgili yorumunuda paylasabiliceksin
tabi ki sadece illa ki kitabi degil istedigin  resimi ve o resimle ilgili yazilarinizida koyabilirsiniz

ornek demoda koydugum kitap resminin boyutu 200 X 310 seklindedir bu sekilde kodu ayarladim cunku  bloglardaki yan taraflarda gadget kisimlarindaki alanlar fazla genis degil kaymalar olmasin diye boyle yaptim

koyucaginiz kitap kapaginin boyutu 200 X 310  boyutunda olmalidir ki cercevenin  disina tasmasin
ama kitap kapaginin daha buyuk boyutta koyacaksaniz  bu kodun css ayarlariylada oynamalisiniz  yani boyutlarini buyutmelisiniz cercevenin boyutunu  siyah efektin boyutunu falan.

nasil gorundugunu gormek istiyorsaniz
Demoya gitmek icin tikla

kodun icinde duzeltilmesi gerken yerler kalin harflerle yazilmis yerlerdir ilk yazi koyucaginiz resmin linkinin oldugu yerdir ikinci yazi koyucaginiz resmle ilgili vereceginiz bilgi yazisidir.

bu eklentiyi blogunuza koymak icin gadget ekle kismindan html/javascript bolumune altaki kodu koymaniz yeterlidir :)

<style type="text/css">
*{ padding:0; margin:0;}
body, { font:100% normal Arial, Helvetica, sans-serif; background-color:#d0e1f1;}
​
#container{ margin:0 auto; padding:0; width:600px; position:relative;}

.rollover_img {
width: 200px;
height: 300px;
background-image: url(buraya sizin ekleyeceginiz resminin linkini koyun sadece yaziyi silin parantezler kalsin );

background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}

.rollover_img a {
color: #fff;
width: 200x;
height: 300px;
display: block;
text-decoration: none;
}

.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
}

.rollover_img a span {
display: none;
width: 195px;
padding:5px;
}

.rollover_img a:hover span {
display: block;
}

</style>


<div class="rollover_img"><a>
<span>
bu kitabi severek okudum  kitap bicok seyi anlatidiyordu falan filan bu yazi aslinda ornek bir yazidir kitabi okumadim ama size yazinin nasil gosterecegini gostermek icin iste boyle sacmaliyorum bunu yazarak heheh :) bu yazinin yerine sizin koyucaginiz kitap yorumunuz gelicektir ona gore ;)
hadi bakalim kolay gelsin (:

</span>
</a>​</div>