Giriş Yap / Kayıt Ol

Beğeni Ağacı3Beğeni
  • 3 Yazan Sefa Kılıç

Konuya Cevap Yaz
Seçenekler Stil
Geri Git   WM Aracı > Programlama / Yazılım > HTML - CSS - XML
  #1  
Okunmamış 01 Ağustos 2012, 03:57
mustafayasin Adlı Üyenin Avatarı
İstanbul gibisin yarim
 
Üyelik Tarihi: 21 Kasım 2011
Mesajlar: 884
Beğenilen Mesajları: 164
Beğendiği Mesajlar: 82
Ticaret: 8, 100%



Arkadaşlar yapmak istediğimi hazırladığım şu giften az çok tahmin etmişsinizdir. csste resime img:hover vererek resimin üzerine gelindiğinde transparan bir şekilde play resmi gözükmesini istiyorum. Bunu nasıl yapabilirim acaba? yardımlarınızı bekliyorum.
TurkMustafa.Com - Bir başka bloğ

Konu mustafayasin tarafından (01 Ağustos 2012, 14:04 ) değiştirilmiştir.
aldido
  #2  
Okunmamış 01 Ağustos 2012, 04:45
muratcan302 Adlı Üyenin Avatarı
Wordpress Uzmanı
 
Üyelik Tarihi: 18 Haziran 2011
Mesajlar: 134
Beğenilen Mesajları: 6
Beğendiği Mesajlar: 5
Ticaret: 2, 100%
Standart

Alıntı:
.resim img{background:none;veya duruma göre kullanma}
.resim img:hover{background:url('play.png');}
şeklinde dene bakalım
  #3  
Okunmamış 01 Ağustos 2012, 06:17
EmPa Adlı Üyenin Avatarı
Kemre.net Açıldı!
 
Üyelik Tarihi: 08 Eylül 2011
Mesajlar: 551
Beğenilen Mesajları: 93
Beğendiği Mesajlar: 84
Ticaret: 0, 0%
Standart

HTML Kodu:
<div class="resim" /><span><span><img src="Resim URL" alt="" /></div>
HTML Kodu:
.resim{width: 125px; height: 125px}
.resim span:hover {width: 125px; height: 125px; background: url(Play Buton URL)}
bu şekilde olması gerekiyor.
Eğer olmaz ise;
<head></head> tagleri arasına yerleştir.
HTML Kodu:
<script src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
    
    $(".referans a img").hover(function(){
        var indis = $(this).parent().parent().index() - 2 ;
        $(this).animate({
            "opacity" : "1"
        });
        $(".referans:eq("+indis+") .hover").fadeIn();
    },function(){
        $(this).animate({
            "opacity" : "1"
        });
        $(".hover").fadeOut();
    });
    
});
</script>
Bunu duracağı kısıma ekle
HTML Kodu:
        <div class="resim">
            <a href="#" /><img src="images/resim.png" width="240px"/><span class="hover"></span></a>
        </div>
Bu da CSS
HTML Kodu:
.resim {position:relative; float:left;width:250px;height:150px;padding:5px;margin-right:60px;}
.hover{display: none; background: url(images/play_btn.png)no-repeat; width: 32px; height: 32px; top: 60px; left: 115px; position:absolute;}
  #4  
Okunmamış 01 Ağustos 2012, 11:32
mustafayasin Adlı Üyenin Avatarı
İstanbul gibisin yarim
 
Üyelik Tarihi: 21 Kasım 2011
Mesajlar: 884
Beğenilen Mesajları: 164
Beğendiği Mesajlar: 82
Ticaret: 8, 100%
Standart

Alıntı:
muratcan302 Adlı Üyeden Alıntı Mesajı göster
şeklinde dene bakalım
Bu şekilde yapınca background resmin altında kalıyor, yani istediğim şey olmuyor.
Alıntı:
EmPa Adlı Üyeden Alıntı Mesajı göster
bu şekilde olması gerekiyor.
Eğer olmaz ise;
<head></head> tagleri arasına yerleştir.
Bunu duracağı kısıma ekle
çok teşekkür ederim ama bunlar da işe yaramadı.
TurkMustafa.Com - Bir başka bloğ
  #5  
Okunmamış 01 Ağustos 2012, 17:21
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 27 Aralık 2011
Mesajlar: 126
Beğenilen Mesajları: 30
Beğendiği Mesajlar: 32
Ticaret: 0, 0%
Standart

Tam olmadı ama fikir verir

Kod:
<style>
.play {
 background: #fff url(play.png) no-repeat;
 background-position:center; 
 width: 500px;
 height: 300px;

}

img.play:hover {
 filter:alpha(opacity=100);
 opacity:.100;
}

</style>

<div class="play">
 <img class="play" src="resim.png" alt="" />
</div>

Konu lbrk tarafından (01 Ağustos 2012, 17:53 ) değiştirilmiştir.
  #6  
Okunmamış 02 Ağustos 2012, 16:54
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 02 Ağustos 2012
Yaş / Cinsiyet: 19 / Erkek
Mesajlar: 15
Beğenilen Mesajları: 4
Beğendiği Mesajlar: 0
Ticaret: 0, 0%
Standart

Kod:
<div class="img"><span></span><img src="http://www.otokar.com.tr/db/tr/urunler/g/akrep_06.jpg" alt="" /></div>
Kod:
.img img {width:200px;height:200px;}
.img span {width:200px;height:200px;display:block;position:absolute}
.img span:hover {display:block;background:url(http://www.sabotagetimes.com/wp-content/themes/sabotage/images/play.png)no-repeat center center;}
demo:sefakilic.com.tr/stil ()
mustafayasin, lbrk ve mujdatsayar bunu beğendi.

Konu Sefa Kılıç tarafından (02 Ağustos 2012, 19:43 ) değiştirilmiştir.
  #7  
Okunmamış 05 Ağustos 2012, 01:32
mujdatsayar Adlı Üyenin Avatarı
M.Kemal Atatürk
 
Üyelik Tarihi: 04 Nisan 2012
Yaş / Cinsiyet: 25 / Erkek
Mesajlar: 1.170
Beğenilen Mesajları: 327
Beğendiği Mesajlar: 488
Ticaret: 0, 0%
Standart

http://sefakilic.com.tr/stil/
Aranılan kan bulundu.
www.mujdatsayar.com
  #8  
Okunmamış 05 Ağustos 2012, 12:58
sinova Adlı Üyenin Avatarı
Barış SAKIZLI
 
Üyelik Tarihi: 17 Ocak 2012
Mesajlar: 607
Beğenilen Mesajları: 57
Beğendiği Mesajlar: 85
Ticaret: 0, 0%
Standart

PM Gönderildi ! Ama Css Değil Yinede Bir bakarsan sen bilirsin Kusura bakma
Konuya Cevap Yaz

Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Benzer Konular
Konu Konuyu Açan Forum Cevap Son Mesaj
Mause üzerine gelince ortaya çıkan linkler cristogi HTML - CSS - XML 6 18 Temmuz 2012 19:46
Blogger Üzerine Gelince Açılan Navbar Eklentisi oguzhancab Blogger 0 07 Nisan 2012 12:24
Mouse üzerine gelince sesi çıksın nasıl? ATCeo Webmaster Genel 3 16 Şubat 2012 23:02
Sosyal iconların üzerine gelince isim çıkartma Rıza Javascript Programlama 21 06 Kasım 2011 23:06
mouse üzerine gelince ses çalsın (acil yardım) aoozdemir HTML - CSS - XML 25 08 Ağustos 2011 17:00

Geri Git   WM Aracı > Programlama / Yazılım > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı



WM Aracı Maskotu Boa WM Aracı © 2010 - 2014
WM Aracı tescilli bir markadır.
Cesur.NETWM Aracı Cesur.NET İnternet Teknolojileri'nde güvenle barınmaktadır.
Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 22:56.