Merhaba
http://onedio.com/
daki manşeti görmüşsünüzdür. Başlığıın üzerine gelince yazı kayarak yukarıya çıkıyor ve ek açıklamalar yazıyor.
Bunu css ile nasıl yapabiliriz?
Onedio Manşet |
24 Mesajlar | 6.176 Okunma | ||
Toplam 24 mesaj ve 6.176 görüntüleme
- Üyelik 13.04.2013
- Yaş/Cinsiyet 29 / E
- Meslek Software Engineer
- Konum İstanbul Anadolu
- Ad Soyad S** Y**
- Mesajlar 501
- Beğeniler 86 / 124
- Ticaret 12, (%100)
- Üyelik 05.02.2014
- Yaş/Cinsiyet 29 / E
- Meslek developer
- Konum Bursa
- Ad Soyad F** Ö**
- Mesajlar 704
- Beğeniler 195 / 222
- Ticaret 8, (%100)
Mesajım bulunsun.
EFSANE! | omerbeyoglu.me
- Üyelik 10.12.2012
- Yaş/Cinsiyet 30 / E
- Meslek Devoloper
- Konum Almanya
- Ad Soyad H** K**
- Mesajlar 3052
- Beğeniler 1 / 941
- Ticaret 50, (%100)
Bulursanız benide etiketleyin.
- Üyelik 22.08.2011
- Yaş/Cinsiyet 35 / E
- Meslek Front-end
- Konum Denizli
- Ad Soyad A** A**
- Mesajlar 1243
- Beğeniler 384 / 148
- Ticaret 3, (%100)
Sanırım herkes aynı şeyi istiyo bende aramıştım bi ara ama bulamadım benimde mesajım bulunsun :D
- Üyelik 26.01.2014
- Yaş/Cinsiyet 42 / E
- Meslek Öğretmen
- Konum İstanbul Anadolu
- Ad Soyad M** A**
- Mesajlar 626
- Beğeniler 13 / 260
- Ticaret 2, (%100)
div yüksekliği ile yapabilirsin. Normalde mesela:
.manset{height:30px;}
.manset:hover{height:200px;}
böyle oluncada geri kalan 170px lik bölüm görünür.
En basit şekli bu.
.manset{height:30px;}
.manset:hover{height:200px;}
böyle oluncada geri kalan 170px lik bölüm görünür.
En basit şekli bu.
- Üyelik 13.04.2013
- Yaş/Cinsiyet 29 / E
- Meslek Software Engineer
- Konum İstanbul Anadolu
- Ad Soyad S** Y**
- Mesajlar 501
- Beğeniler 86 / 124
- Ticaret 12, (%100)
Mehmet ARIK adlı üyeden alıntı
div yüksekliği ile yapabilirsin. Normalde mesela:.manset{height:30px;}
.manset:hover{height:200px;}
böyle oluncada geri kalan 170px lik bölüm görünür.
En basit şekli bu.
Kaydırma efekti uygulamak lazım.
- Üyelik 25.08.2013
- Yaş/Cinsiyet 34 / E
- Meslek Web Master & Yazar
- Konum Balıkesir
- Ad Soyad M** K**
- Mesajlar 230
- Beğeniler 36 / 49
- Ticaret 25, (%100)
jquery içerisine
$(".mansethaber").hover(
function(){
$(".yazi").animate({"bottom":"100px"},250);
},
function(){
$(".yazi").animate({"bottom":"50px"},250);
}
);
yani üzerine gelince div nesnemiz 50 px yükseliyor böyle olunca geride kalan kısım açığa çıkar ve yazı kısmı görünür tabi manset haber kısmını yani resmin olduğu divi overflov:hidden yapmak ve position:relative yapmak gerek
$(".mansethaber").hover(
function(){
$(".yazi").animate({"bottom":"100px"},250);
},
function(){
$(".yazi").animate({"bottom":"50px"},250);
}
);
yani üzerine gelince div nesnemiz 50 px yükseliyor böyle olunca geride kalan kısım açığa çıkar ve yazı kısmı görünür tabi manset haber kısmını yani resmin olduğu divi overflov:hidden yapmak ve position:relative yapmak gerek
- Üyelik 26.01.2014
- Yaş/Cinsiyet 42 / E
- Meslek Öğretmen
- Konum İstanbul Anadolu
- Ad Soyad M** A**
- Mesajlar 626
- Beğeniler 13 / 260
- Ticaret 2, (%100)
Kaydırma efekti uygulamak lazım.
Hocam CSS de kaydırma efekti olmaz. CSSnin yanında javascripte kullanacaksan animation speed ayarlayarak yavaşlatırsın. O arada opacity düşürüp artırırsın. Bu kadar yani.
Böyle en basit şeyleri gözünde büyütmene gerek yok. Güzel görünüyor diye karmaşık kodlar kullandıklarını, özel yazılımlar yaptıklarını falan sanma. Bildiğin hover height değişkeni işte. Başka birşey değil.
- Üyelik 15.07.2013
- Yaş/Cinsiyet 37 / E
- Meslek web coder
- Konum İstanbul Avrupa
- Ad Soyad S** D**
- Mesajlar 203
- Beğeniler 7 / 36
- Ticaret 8, (%88)
pm atın yardımcı oluyiym
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)