CSS3 Görsele Hover Olayı İle Efekt Verme

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’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 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 Görsele Hover Olayı İle Efekt Verme
4.6 (92.5%) 8 oy

12 yorum

  1. 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 ?

    1. 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
  2. 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

Bir Cevap Yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.