CSS ile Görsel Bulanıklaştırma Efekti

CSS ile Görsel Bulanıklaştırma Efekti - CSS Image Blur Effect

Tasarlanan sayfalarda bulanıklaştırma efekti genellikle z,yaretçilerin dikkatini belli bir noktaya çekmek istediğimizde kullanırız. Örneğin bir bir sliderde yer alan görsel ve alt açıklama metinleri iç içe girmemesi için alt açıklama metinlerine arkaplan eklemek bir yöntem olabilir. Ancak "hover effect" dediğimiz maus ile ziyaretçi görselin üzerine geldiğinde resmin otomatik bulanıklaşması bu alt metnin daha da ön plana çıkmasını sağlarken sitenizde hoş bir detay olacaktır. Aşağıdaki görselde 1 ve 2 numaralı önizlemelerde farkı açıkça görebilirsiniz.

Birde örnek ile uygulaması için "blur pic" div grubu içinde verilen bir görsel için örneğin HTML yerleşimi

<div class="blur pic">
  <img src="http://lorempixel.com/300/300/transport/2" alt="plane">
</div>

şeklinde oldun bu görsele Blur Effect özelliğini sağlama için div gurubunu ilgili css satırları

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}

şeklinde olmalıdır.