CSS3 Hover, CSS3 ile beraber gelen en büyük gelişmelerden biri de gelişmiş animasyonlar oluşturabiliyor olmaktır diye düşünüyorum. Bu makalemizde görsel üzerine gelindiğinde ne tür efektler uygulayabileceğimiz konusunda bol örnekli anlatımlar yapılacaktır.
CSS3’de Görsele hover olayı ile Efekt Verme
Aşağıdaki efektlerimize ait sonuçları görmek için görsel üzerine imleci götürmeniz yeterlidir efekt’e ait kodlar için ise HTML ve CSS sekmelerini kullanınız.
animate.css adlı css kütüphanesi ile sahip olacağınız 100’e yakın animasyon için cursor.muratoner.net/animatecss.html adresini ziyaret edebilirsiniz.
Efekt 1 – Büyütme
Efekt 2 – Küçültme
Efekt 3 – Başlık Gösterme
Efekt 4 – Rotasyon Değişimi
Efekt 5 – Ovallik Değişimi
Efekt 6 – Resim Değişimi
Efekt 7 – Ovallik Değişimi 2
Animate.css ile kolay animasyon uygulama yöntemi
animate.css adlı css kütüphanesi ile sahip olacağınız 100’e yakın animasyon için cursor.muratoner.net/animatecss.html adresini ziyaret edebilirsiniz. CSS3 dünyasında animasyon olarak çok fazla örnek kod farklı kaynaklarda yer almaktadır ama ben en basit anlamda animasyon konusuna yeni girenler için seçtiklerime makale içerisinde yer vermeye çalıştım.
Animate.css tarafında kullanılabilecek efektler
Attention seekers
- bounce
- flash
- pulse
- rubberBand
- shakeX
- shakeY
- headShake
- swing
- tada
- wobble
- jello
- heartBeat
Back entrances
- backInDown
- backInLeft
- backInRight
- backInUp
Back exits
- backOutDown
- backOutLeft
- backOutRight
- backOutUp
Bouncing entrances
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
Bouncing exits
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
Fading entrances
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeInTopLeft
- fadeInTopRight
- fadeInBottomLeft
- fadeInBottomRight
Fading exits
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- fadeOutTopLeft
- fadeOutTopRight
- fadeOutBottomRight
- fadeOutBottomLeft
Flippers
- flip
- flipInX
- flipInY
- flipOutX
- flipOutY
Lightspeed
- lightSpeedInRight
- lightSpeedInLeft
- lightSpeedOutRight
- lightSpeedOutLeft
Rotating entrances
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
Rotating exits
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
Specials
- hinge
- jackInTheBox
- rollIn
- rollOut
Zooming entrances
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
Zooming exits
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
Sliding entrances
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
Sliding exits
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
📚 İlgilenebileceğiniz Diğer Makaleler
- Doğal CSS değişkenlerini kullanalım!
- CSS3 Resize Özelliği İle Nesnelere Boyutlarını Değiştirebilme Özelliğini Katma
✍ Lütfen CSS3 Hover ile alakalı olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından CSS3 Hover adlı makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
çok teşekkürler, saatlerdir aradığım şeydi. işe yarar kaynak bulamamıştım.
Yorum için teşekkürler. İşinizi görmüş olmasına sevindim.
güncellermisiniz
Gerekli güncelleme yapılmıştır.
çok teşekür ederim
Rica ederim, yorumunuz için ben teşekkür ederim.
Murat Bey selamlar, bende baya aradım ama mouse ile resim üzerine gelince ses dosyası çalmasını istiyorum lakin nasıl yapılır bilemedim. Buradaki kodların üzerinden acaba ses dosyası ekleme ayarı yapabilir miyim ?
Merhaba aslında yapacağınız işlemi kısa bir kodla kolaylıkla halledebilirsiniz şöyleki html event’i olan ve hiçbir plugin v.s. kullanmanıza gerek olmayan onmouseover event’ine geçeceğiniz fonksiyon’da benim ses işlemleri için kullandığım soundamanager2 plugin’inin kullanabilirsiniz yada ona bile gerek yok yine html5 ile kodlarımıza dahil olan audio etiketini kullanabilir onmouseover gibi herhangi bir mouse üzerine geldiğinde event’i içerisinde ses dosyanızın yer aldığı audio etiketinin play fonksiyonu ile başlatabilirsiniz. onmouseout’da ise ses’i pause yada stop fonksiyonları ile durdurubilirsiniz.
Üstteki anlattıklarımı destekleyecek kaynaklar
harika kesinlikle…
Teşekkürler
Allah razı olsun kardeşim güzel paylaşım, lakin ben bu hovere link vermek istiyorum ama bir türlü beceremedim yardım edermisiniz lütfen
Sizinle paylaştığım alttaki jsfiddle adresinden hover efekti verilmiş ve görsele link tanımlanmış örneğe ulaşabilirsiniz.
http://jsfiddle.net/h7hxLf1r/4/
Peki bu görselleri tıklanabilir hale nasıl getirebiliriz?
Alttaki linkten hover efekti verilmiş görsel’e ayrıca nasıl linkl verilir örnek kodda mevcut, gözatabilirsin.
http://jsfiddle.net/h7hxLf1r/4/
bu kodu Blogspot siteme ekleyebilirmiyim ekleyebilirsme nasıl olucak acaba ?
Beğendiğiniz efekt örnek kodlarına makale içerisindeki her bir efekt için yer alan HTML ve CSS sekmelerinden ulaşabilirsiniz, bu kodları da sitenizde ilgili yerlere ekleyin ve uygulamak istediğiniz element için css seçiciyi düzenleyin.
sa Murat ÖNER ben resim değişiminin htmlsini kopyalayıp yapıştırıyorum ama bir türlü olmuyor.Bunun için yardım edermisin ?
html ve css kodlarını kopyalayıp kendi görselleriniz ile değiştirmeniz yetecektir.
Merhaba çok teşekkürler ama benim sorunum resmin üstüne gelince resmin transparanlaşması. Bunu nasıl engelleyebilirim? Ben de hueman kullanıyorum bu arada.
İyi günler murat bey benim de sorun mesela resmin üzerine gelince resim değişti ama ben türkiye haritasından bir ilin üzerine gelince resim eklensin istiyorum bunun için bana yardımcı olur musunuz
Bu olayı map etiketi kullanarak kolayca yapabilirsiniz diye düşünüyorum. Fikir vermesi açısından özetle şöyle bir şey olabilir map etiketi kullanılarak belli koordinatlar ile tıklanabilir yerler oluşturursunuz bu tıklama noktalarına onhover olduğunda mouse’ın bulunduğu x-y koordinatlarında position: absolute ile işaretlenmiş görselinizi gösterirsiniz mouseblur olduğunda ise görseli gizleyebilirsiniz.
Hocam acil dönüşünüzü bekliyorum. Başta gösterdiğiniz büyütme şeklini görsel üzerinde değil div üzerinde deniyorum şu şekilde;
.animasyonlar:hover + .mer {
background-color:orange;
width:400px;
}
fakat .mer haricinde bir dive daha uygulamam lazım .mer yanına + ekleyip başka bir class ekleyince ikisi birden çalışmıyor karışıyor ikisini birlikte nasıl büyüyen bir şekilde yapabilirim. Buradaki amaç biraz farklı başka bir div üzerine gelince diğer divin değişmesini istiyorum hocam dönüşünüzü bekliyorum…
hocam bunları 4 erli gruplarda yanyana ve alt alta nasıl dizeriz?
Bootstrap’da yer alan row ve altında col-3 kullanımı ile yanyana 4’erli bir grup oluşturabilirsiniz.
keşke o kadar yeteneğim olsaydı 🙁
Alttaki örnek işinizi görecektir.
hocam sen varya kralsın be. Ellerine kollarına sağlık. yorumdan beri 2 saat uğraştım yapamadım.
Rica ederim, işinizi görmüş olmasına sevindim.
hocam inşallah çok olmuyorumdur ama bunların her biri ayrı resim olmuyor neden?
hocam onuda çözdüm herşey için tşkler
hocam sanırım son bir sorun kaldı mobil uyumlu olmadı? oysa öncekiler direk olmuştu.. sayfam normalde responsive ve geri kalan tüm sayfalar mobl uyumlu. resimleri bir miktar büyüttüm ondan olabilir mi?
bunuda çözdüm hocam 🙂 şimdi bu efect i alttan çıkarmaya çalışıcam
hocam elimde biir kod var. alttan kayan yazı çıkıyor. pc de herşey istediğim gibi faket mobilde ne denediysem olmadı düzelmedi. kodları size atsam bi bakma şansınız olur mu?
Kodlar eğer kısa ise buradan paylaşabilirsiniz eğer uzun ise mail yolu ile paylaşabilirsin.