Resimin üzerine gelince Play butonu çıkartma

01.08.2012 03:57

mustafayasin PHP & IOS Developer Kullanıcı

Üyelik 21.11.2011
Yaş/Cinsiyet 30 / E
Meslek öğrenci
Konum İstanbul Anadolu

Ad Soyad M** T**
Mesajlar 914
Beğeniler 91 / 173
Ticaret 11, (%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.

01.08.2012 04:45

#2

muratcan302 Wordpress Uzmanı Kullanıcı

Üyelik 18.06.2011
Yaş/Cinsiyet 49 / E
Meslek Muhasebe
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 91
Beğeniler 4 / 6
Ticaret 2, (%100)

.resim img{background:none;veya duruma göre kullanma}
.resim img:hover{background:url('play.png');}

şeklinde dene bakalım

01.08.2012 06:17

#3

EmPa GRAFİKER & Bilgisayar Müh Kullanıcı

Üyelik 08.09.2011
Yaş/Cinsiyet 29 / E
Meslek Öğrenci
Konum Elazığ

Ad Soyad K** P**
Mesajlar 539
Beğeniler 93 / 86
Ticaret 0, (%0)

.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;
tagleri arasına yerleştir.

<script></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

Bu da CSS

.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;}

KEP Creativity | Digital Agency

01.08.2012 11:32

#4

mustafayasin PHP & IOS Developer Kullanıcı

Üyelik 21.11.2011
Yaş/Cinsiyet 30 / E
Meslek öğrenci
Konum İstanbul Anadolu

Ad Soyad M** T**
Mesajlar 914
Beğeniler 91 / 173
Ticaret 11, (%100)

muratcan302 adlı üyeden alıntı

şeklinde dene bakalım

Bu şekilde yapınca background resmin altında kalıyor, yani istediğim şey olmuyor.

EmPa adlı üyeden alıntı

bu şekilde olması gerekiyor.
Eğer olmaz ise;
tagleri arasına yerleştir.
Bunu duracağı kısıma ekle

çok teşekkür ederim ama bunlar da işe yaramadı.

01.08.2012 17:21

#5

lbrk WM Aracı Kullanıcı

Üyelik 27.12.2011
Yaş/Cinsiyet - / E
Meslek
Konum

Ad Soyad ** **
Mesajlar 123
Beğeniler 29 / 27
Ticaret 0, (%0)

Tam olmadı ama fikir verir

02.08.2012 16:54

#6

Sefakilicc WM Aracı Kullanıcı

Üyelik 02.08.2012
Yaş/Cinsiyet 29 / E
Meslek Öğrenci
Konum Ankara

Ad Soyad ** **
Mesajlar 15
Beğeniler 0 / 5
Ticaret 0, (%0)





.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 ()

4 kişi bu mesajı beğendi.

05.08.2012 01:32

#7

mujdatsayar M.Kemal Atatürk Kullanıcı

Üyelik 04.04.2012
Yaş/Cinsiyet 35 / E
Meslek Grafik tasarım
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 1285
Beğeniler 452 / 308
Ticaret 0, (%0)

http://sefakilic.com.tr/stil/
Aranılan kan bulundu.

www.mujdatsayar.com

05.08.2012 12:58

#8

bsakizli Bilgisayar Programcısı Kullanıcı

Üyelik 17.01.2012
Yaş/Cinsiyet 28 / E
Meslek Yönetim Bilişim Sistemleri Uzm
Konum

Ad Soyad B** S**
Mesajlar 925
Beğeniler 102 / 79
Ticaret 2, (%100)

PM Gönderildi ! Ama Css Değil Yinede Bir bakarsan sen bilirsin :) Kusura bakma :)

Resimin üzerine gelince Play butonu çıkartma

Üye Girişi Yap