Saydam Kenarlıklar ile Yalnızca CSS Yalnızca Resim Gösterme Efekti Oluşturma

CSS’de iki CSS değişkeni, --bgc ve --karartmak için Arka plan rengi ve boyutlar arasında .foo sırasıyla Örnekte, ben kullandım aynı değer kare şeklinde bir kutu almak için genişlik ve yükseklik için ayrı değişkenler Dikdörtgen istiyorsanız, yükseklik ve genişlik için.

Biz de ekleriz konum: göreceli hükmetmek .foo, Böylece onun sahte elemanları, kullanacağımız görüntüyü ortaya çıkarmak, olabilir kesinlikle konumlandırılmış (aşağıya bakınız), ve böylece üst üste yığılmış.

 .foo --bgc: # FFCC03; -dim: 300px; genişlik: var (- dim); yükseklik: var (- dim); arkaplan rengi: var (- bgc); pozisyon: göreceli;  

Biz boş ekle içerik özellik her iki sözde elemente, .foo :: önce ve .foo :: sonrası, onları düzgün şekilde işlemek için.

 .foo :: before, .foo :: after content: "; position: absolute; left: 0; üst: 0; 

.foo eleman, iki sözde elemanı, .foo :: önce, .foo :: sonrası, ve onların : hover sözde sınıflar bir al geçiş özellik bu olacak bir kolaylık geçişi ekle Onlara 500 milisaniye (yarım saniye).

 .foo, .foo: hover, .foo :: önce, .foo :: sonra, .foo: hover :: önce, .foo: hover :: after  

2. Resmi ekleyin

Resmi ekleriz .foo :: önce sözde eleman arka plan resmi olarak, ve Tüm sözde elemanı kapsayacak şekilde boyutlandırmak ile Genişlik ve yükseklik özellikleri. Biz tam altına .foo eleman kullanmak z dizini: -1 kural.

 .foo :: önce genişlik:% 100; yükseklik:% 100; arkaplan: url (camel.png) merkez / kapak; z-endeksi: -1;  

merkez anahtar kelime görüntüyü ortalar, iken kapak anahtar kelime resmi tüm öğeyi koru en boy oranını koruyarak.

Üzerinde aşağıdaki ekran görüntüsü Şimdiye kadar neye sahip olduğumuzu görebilirsiniz (Z-endeksi -den kaldırıldı .foo :: önce Böylece görülebilir):

3. Kayar arka planı ekleyin

Eklemek için Resmin arkasında daha küçük (dışarı kayan) arka plan, diğer sözde elemanı kullanacağız, .foo :: sonrası.

Başka bir CSS değişkeni yaratıyoruz, --b, için sınır genişliği. Veririz üç şeffaf kenarlık -e ::sonra sözde eleman: üst, sağ ve alt.

 .foo :: sonra --b: 20px; genişlik: hesaplanan (100% - var (- b)); yükseklik: kals (% 100 - kals (var (- b) * 2)); kenarlık: var (- b) katı saydam; sınır-sol: yok; kutu-gölge: iç metin 0 var (- dim) 0 var (- bgc); filtre: parlaklık (.8); z-endeksi: -2;  

Genişlik olarak hesaplanır hesaplanan (% 100 - var - b)) bu döner toplam genişliği .foo Yatay kenarlıkların toplam genişliği eksi (sadece sağ sınır, çünkü sol sınır yok).

yükseklik olarak hesaplanır hesaplanan (% 100 - hesaplanan (var (- b) * 2)) bu döner toplam yükseklik .foo dikey kenarlıklarının toplam genişliği eksi (üst ve alt sınırlar).

İle kutu gölge mülkiyet, biz de yatay bir iç metin gölgesi ekleyin aynı boyutta .foo (hangisi var (- dim)).

Bir CSS filtresi parlaklık (.8) arka plan rengini koyulaştırır biraz ve nihayet z dizini: -2 kural yerleştirir ::sonra altında sahte element ::önce görüntüyü içeren.

Burada demo ekran görüntüsü şu ana kadar işlendi (birlikte Z-endeksi her iki sözde elementten kaldırıldıkları görülebilirler):

4. Dönüşümü ekleyin

Biz ekle dönüştürmek özellik iki sözde öğeye, yani kullanıcı üzerine geldiğinde .foo, her iki sözde eleman yatay olarak taşındı.

Bizim gibi zaten ekledi geçiş tüm elemanların mülkü Adım 1'in sonunda görüntünün ve arka planın hareketi ikisi de animasyonlu.

 .foo: hover :: before, .foo: hover :: after dönüşümü: translateX (100%);  

Aşağıda, görebilirsiniz son demo.

Bonus: İsteğe bağlı marj

Eğer görüntülersen .foo diğer öğelerin yanında Bir sayfada ve diğer öğeleri uzaklaş görüntü ve arka planı kayarken ile aynı genişlikte bir sağ kenar boşluğu ekleyin. .foo -e .foo: hover eleman.

 .foo: vurgulu kenar boşluğu: var (- dim);