Daha İyi Görüntü Vurgulu Etkileri için 10 CSS Kütüphanesi

Kullanıcılara izin vermek web sayfasının hangi bölümünün tıklanabilir olduğunu kolayca ve net olarak anlayın UX tasarımının önemli bir parçasıdır. Bunu yapmanın eski ama altın yolu metin rengini değiştirmek ve bunun altını çizmek oldu. Günümüzde, CSS ile, özellikle görüntülere vurgulu efektler sunmanın çok daha fazla yolu var.

Geliştiriciler şimdi yapabilir Bir hover olayı tetiklendiğinde geçiş efektleri veya animasyon ekleyin. Yönlü slaytlara bakıyoruz, farklı hızlarda zum yapıyoruz, solmaya ve solmaya, menteşe efektlerine, spot göstergelerine, yalpalamalara, sekmelere ve daha fazlasına bakıyoruz..

Bu derlemede, var 250'den fazla vurgulu etkisi sana ilham vermek için. Kodu kaynakta da alabilirsiniz..

Görüntü Vurgulu Etkileri (16 etki)

Bu sayfada, başlıkları olan 16 hover resim efektinin güzel bir koleksiyonunu bulacaksınız. Resimlerin üzerinde gezdirerek her efekt için HTML ve CSS kodunu alın, ardından Tamam'ı tıklayın. Kodu Göster.

Image Caption Hover Animasyonu (4 efekt)

İşte resmin üzerine geldiğinde çalışan 4 harika resim yazısı animasyonu. Etkiler, tarayıcıda uyumluluğu artırmak için saf CSS3 geçişleri ve dönüşümü ile üretilmiştir ve JavaScript içermemektedir..

iHover (35 efekt)

iHover, CSS3 tarafından desteklenen vurgulu efekt koleksiyonudur. 20 daire vurgulu etkisi ve 15 kare vurgulu etkisi vardır. Etkileri kullanmak için, bir HTML işaretlemesi yazmanız ve CSS dosyalarını eklemeniz gerekir..

Görüntü Hover (44 etki)

Bu kütüphane saf CSS ile yapılmış 44 efekt içeriyor. Etkilerin bazıları, solma, itme, slayt, menteşeler, gösterme, yakınlaştırma, bulanıklaştırma, çevirme, katlama ve kepenkleri içerir. 14 € karşılığında satın alınabilecek 216 efektin genişletilmiş bir sürümü var..

Hover Etkisi Fikirleri (30 efekt)

Codrop tarafından yapılan bu resim vurgusu demosu, resimlerle resim yazıları arasında yumuşak geçişler yaparken size ilham verir. Öğreticiler ve kaynak kodlu iki set üzerinde toplam 30 etki vardır..

Vurgulu CSS (108 efekt)

Vurgulu CSS, düğme, bağlantı veya görüntü gibi herhangi bir öğeye vurgulu efektler eklemenizi sağlar. Etkileri 2B geçişleri, arka plan geçişlerini, kenarlığı, Gölge ve Işıltı geçişlerini ve daha fazlasını içerir. Kütüphane CSS, Sass ve LESS dillerinde mevcuttur..

Animatism (100+ efekt)

Düğmelere, bindirmelere, detaylara, altyazılara, resimlere ve sosyal medya düğmelerine 100'den fazla resim vurgusu animasyonu var. Tüm efektler CSS3 tarafından desteklenmektedir.

Başlık Hover Etkisi (7 efekt)

Bu koleksiyonda 7 farklı efekt var. Tüm geçişler gerçekten çok hoş ve pürüzsüz görünüyor. Bu etkileri projenize nasıl uygulayacağınızı öğrenmek için eğitim bölümüne gidin..

CSS Görüntü Vurgulu Etkileri (15 efekt)

Yakınlaştırma, kaydırma, döndürme, gri tonlama, bulanıklık, opaklık ve diğer temel efektler gibi basit vurgulu efektler koleksiyonu. Bu efektleri, kullanmadan önce CSS sınıfını ekleyerek kullanabilirsiniz. şekil etiket.

Yön tanıyan 3D vurgulu efekti

Bu, son fare hareketinizi algılayacak süper harika bir hover etkisidir. Resim yazıları, son imleç konumunuza göre dört yönden birinden açılacaktır..

Hover Animasyonu

İşte UNIQLO'dan esinlenilmiş bir sınır gezintisi animasyonu. Bir vurgulu olay üzerine, görüntünün kenarlığı canlandırılacak.

Hareketli Vurgulu Taş Fayans

Döşeme tasarımları için bir tane, diğerinde ise yavaş zoom, slaytlar, açılır pencereler, soluk renkler.

SVG clip-Path Hover Etkisi

SVG tarafından desteklenen süper harika bir x-ışını spot ışığı klip-yolu ve CSS geçişleri. Chrome, Opera ve Safari'de iyi çalışıyor.