Yalnızca CSS’ye Özel Kaydırmalı Resim Yazısı Vurgulu Efekt

Faydalı Alternatif Metin Yazma

Bir resim yazısının üzerine gelindiğinde bir görüntünün üzerinde kaydırılarak daha fazla içerik ortaya çıkarması gereken bir kullanıcı arayüzü oluşturmaya hiç ihtiyaç duydunuz mu?

Bu, kariyerim boyunca çeşitli şekillerde uygulamakla görevlendirildiğim bir şey. Bunu yapmak çok zor değil: Kullan position: absolute başlığı görüntünün üzerine yerleştirmek, ardından aşağı dönüştürmek, üzerine gelindiğinde tekrar yukarıya geçirmek – unutmadan overflow-y: hidden içeren eleman üzerinde.

İşte basit bir uygulama:

Kalemi Gör Basit CSS yazısı vurgusu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Zorluk, bindirmenin görüntünün üzerinden “göz atması” gereken kısmı olduğunda ortaya çıkar. önceki vurgulu belirsiz yüksekliktedir. Diyelim ki, bazılarının birden fazla satıra sarılmış uzun adları veya iş unvanları olabilecek bir takım üyeleriniz varsa, durum kolayca olabilir.

Üzerine gelindiğinde içeriğin gösterildiği 4 öğeden oluşan bir ızgara

Bindirmeyi sabit bir uzunlukta dönüştürmek, metnin bir kısmının kırpılmasına neden olabilir. Altyazı başlıklarının yüksekliğini tespit etmek için Javascript’e başvurabilir ve transform buna göre mülkiyet. Ancak bunu yalnızca CSS ile oldukça tatmin edici bir şekilde çözebiliriz.

İlk önce tüm bindirmeyi %100 oranında azaltıyoruz:

.item {
position: relative;
}

.item__overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: transform 300ms;
transform: translate3d(0, 100%, 0);
}

Ayrıca resim üzerinde “göz atacak” kısım olan altyazı başlığını da %100 oranında artırıyoruz. Şimdi ilk başta istediğimiz gibi bakıyor. Not, biz de ayarlıyoruz transition geçişin pürüzsüz olmasına yardımcı olacak eşit süreye sahip hem bindirme hem de başlık başlığı üzerindeki özellik:

.item__caption-title {
transition: transform 300ms;
transform: translate3d(0, -100%, 0);
}

Ayrıca vurgulu ve odak geçiş durumlarımızı ayarlamamız gerekiyor. Bu kartlar için, tüm kartın üzerine gelinmesini sağlamak için mutlak konumlandırılmış bir bağlantı bağlantısı kullanıyorum. Fareyle üzerine gelindiğinde, hem bindirme hem de altyazı başlığı orijinal konumlarına geri ayarlanır. Ayrıca, başlığın fare olmayan kullanıcılar için değiştirilebilmesini sağlamak için odak stilleri de ekliyorum:

.item__overlay a:hover ~ .item__overlay,
.item__overlay a:focus ~ .item__overlay,
.item__overlay a:hover ~ .item__overlay .item__caption-title,
.item__overlay a:focus ~ .item__overlay .item__caption-title
{
transform: translate3d(0, 0, 0);
}

Bu zaten oldukça iyi çalışıyor. Ancak son bir rötuş eklemek ve biraz daha yumuşak hissettirmek için, altyazı gövdesinin opaklığını değiştirmeyi seviyorum, hafif bir gecikme ekleyerek, yalnızca altyazı en çok geçiş yaptıktan sonra görünmesi için:

.item__body {
opacity: 0;
transition: opacity 500ms 100ms;
}

.item__overlay a:hover ~ .item__overlay .item__body,
.item__overlay a:focus ~ .item__overlay .item__body
{
transform: translate3d(0, 0, 0);
}

İşte tam örnekle demo:

Kalemi Gör Fareyle yukarı kaydırma efekti yalnızca CSS Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.