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
UkashSatinAl.com.tr
  #1  
Okunmamış 01 Ağustos 2012, 03:57
mustafayasin Adlı Üyenin Avatarı
İstanbul gibisin yarim
 
Üyelik Tarihi: 21 Kasım 2011
Mesajlar: 950
Beğenilen Mesajları: 172
Beğendiği Mesajlar: 94
Ticaret: 10, 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.
Grafik tasarım işleriniz çok uygun fiyata yapılır.
Referanslar için özel mesaj gönderebilirsiniz.

Konu mustafayasin tarafından (01 Ağustos 2012, 14:04 ) değiştirilmiştir.
Online Mağaza Banner 728x90
  #2  
Okunmamış 01 Ağustos 2012, 04:45
muratcan302 Adlı Üyenin Avatarı
Wordpress Uzmanı
 
Üyelik Tarihi: 18 Haziran 2011
Mesajlar: 132
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: 569
Beğenilen Mesajları: 94
Beğendiği Mesajlar: 96
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: 950
Beğenilen Mesajları: 172
Beğendiği Mesajlar: 94
Ticaret: 10, 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ı.
Grafik tasarım işleriniz çok uygun fiyata yapılır.
Referanslar için özel mesaj gönderebilirsiniz.
  #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: 20 / 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: 26 / Erkek
Mesajlar: 1.167
Beğenilen Mesajları: 327
Beğendiği Mesajlar: 487
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: 629
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: 05:16.