CSS ile div ve img blur geçiş efekti verme

Sadece css kullanarak resim veya div ‘lere blur efekti vermemiz mümkündür.
Bir projede ihtiyaç duyduğum blur efektini sizlerle paylaşmak istedim.
CSS Kodu :

body{ padding:50px; text-align:center; }
img{ margin:50px 0 0 0; }
h1, img{
    font-family:sans-serif;
    font-weight:bold;
    -webkit-filter: blur(15px);
    -webkit-transition: -webkit-filter .50s;
}
h1:hover, img:hover{
    -webkit-filter: none;
    -webkit-transition: -webkit-filter .50s;
}

HTML Kodu :

<h1>Kahramaner.COM // BLUR EFFECT</h1>
<a href="http://www.kahramaner.com"><img src="#" alt="Kahramaner!" title="Kahramaner!"></a>
Beğen  
Yazar

2008, Yılından beri sistem ve yazılım teknolojileri ile ilgilenmekteyim. Ayrıntılı bilgi için hakkımda sayfamı inceleyebilirsiniz.

Bir Cevap Yazın

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

Yapılan Yorumlar ( 2 )