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.

Bunlar da hoşunuza gidebilir...

18 Cevaplar

  1. Osman dedi ki:

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

  2. fdsfsdf dedi ki:

    güncellermisiniz

  3. ŞAHİN ANLİ dedi ki:

    çok teşekür ederim

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

  5. Serdar dedi ki:

    harika kesinlikle…

  6. 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

  7. Hakan dedi ki:

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

  8. Hydra Subs dedi ki:

    bu kodu Blogspot siteme ekleyebilirmiyim ekleyebilirsme nasıl olucak acaba ?
    Sitem:https://hydrasubs.blogspot.com/

    • 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.

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

Bir cevap yazın

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