Geri

Fill Text Effect On Hover HTML & CSS (Filtreli Yazı Hover Efekti)

CSS;

body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'Montserrat', sans-serif;
font-size: 5em;
text-transform: uppercase;
color: #ccc;
}
h1:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: #232323;
width: 0;
overflow: hidden;
transition: 1s;
}
h1:hover:before {
width: 100%;
}

Hızlı İçerik

HTML;

<h1 data-text=”digitalkure”>digitalkure</h1>

https://youtu.be/A1hPRJVxP1I
Burak AKYOSUN
Burak AKYOSUN
Yönetim bilişim sistemleri lisans eğitimimi tamamladıktan sonra web tasarım alanında kendimi geliştirmeye devam etmekteyim. 5 Yıldır aynı sektörde hizmet veriyorum bunun yanı sıra e-ticaret sistemleri alanında da çalışmaktayım..

Yorum Yap

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu web sitesi çerezleri bilgisayarınızda saklar. Çerez Politikası

İletişime Geçin
Digital Küre Reklam Ajansı ®
Merhaba 👋
Size nasıl yardımcı olabiliriz ?