CSS3 Hover Olayı İle Görsele Efekt Verme

CC3 Hover Olayı, CSS3 ile beraber gelen en büyük gelişmelerden biride animasyonlar oluşturabiliyor olmaktır. Bu makalemizde görsel üzerine gelindiğinde ne tür efektler uygulayabileceğimiz konusunda bol örnekli anlatımlar yapılacaktır.

CSS3 Hover Olayı İle Görsele Efekt Verme

CSS3 Hover Olayı İle Görsele 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

Görsellerinizin border-radius değişimi için de uygulayabileceğiniz efekt örneğini altta bulabilirsiniz.

Efekt 6 – Resim Değişimi

Görsel değişimi için de ayrıca efekt uygulamak için alttaki örneği kullanabilirsiniz.

Efekt 7 – Ovallik Değişimi 2

Görsellerinizin border-radius değişimi için de uygulayabileceğiniz efekt örneğini altta bulabilirsiniz.

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.

📚 Diğer CSS Makalelerinden Bazıları


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Bunlar da hoşunuza gidebilir...

21 Cevaplar

  1. Osman dedi ki:

    çok teşekkürler, saatlerdir aradığım şeydi. işe yarar kaynak bulamamıştım.

  2. Murat ÖNER dedi ki:

    Yorum için teşekkürler. İşinizi görmüş olmasına sevindim.

  3. fdsfsdf dedi ki:

    güncellermisiniz

  4. Murat ÖNER dedi ki:

    Gerekli güncelleme yapılmıştır.

  5. ŞAHİN ANLİ dedi ki:

    çok teşekür ederim

  6. Murat ÖNER dedi ki:

    Rica ederim, yorumunuz için ben teşekkür ederim.

  7. izmir balon süsleme dedi ki:

    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 ?

  8. Murat ÖNER dedi ki:

    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

    1. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
    2. http://www.schillmania.com/projects/soundmanager2/
    3. https://stackoverflow.com/questions/1711279/javascript-audio-video-element-control-volume-programmatically
    4. https://www.w3schools.com/jsref/event_onmouseout.asp
  9. Serdar dedi ki:

    harika kesinlikle…

  10. Murat ÖNER dedi ki:

    Teşekkürler

  11. Hasan dedi ki:

    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

  12. Murat ÖNER dedi ki:

    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/

  13. Hakan dedi ki:

    Peki bu görselleri tıklanabilir hale nasıl getirebiliriz?

  14. Murat ÖNER dedi ki:

    Alttaki linkten hover efekti verilmiş görsel’e ayrıca nasıl linkl verilir örnek kodda mevcut, gözatabilirsin.

    http://jsfiddle.net/h7hxLf1r/4/

  15. Hydra Subs dedi ki:

    bu kodu Blogspot siteme ekleyebilirmiyim ekleyebilirsme nasıl olucak acaba ?

  16. Murat ÖNER dedi ki:

    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.

  17. hasan dedi ki:

    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 ?

  18. Murat ÖNER dedi ki:

    html ve css kodlarını kopyalayıp kendi görselleriniz ile değiştirmeniz yetecektir.

  19. Burak Ergül dedi ki:

    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.

  20. Aysenur dedi ki:

    İ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

  21. Murat ÖNER dedi ki:

    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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir