CSS Konuları

CSS ile Görsel Yakınlaştırma Efekti

10/08/2025
Zoom Image When User Hover with CSS

CSS’in cursor ve transform özelliklerini kullanarak bir yakınlaştırma efekti oluşturabilirsiniz. cursor özelliğinde ve img etiketinde aynı görsel URL’ini belirtin.

img {
   cursor: url(../images/cursor.png), auto;
}

img:hover {
  transform: scale(1.1)
}

CSS ile Görsel Yakınlaştırma Örneği

Fareyi yakınlaştırmak için görüntünün üzerine getirin.

transform scale özelliğini kullanarak yakınlaştırma seviyesini ayarlayabilirsiniz.