Bilmek istediğin her şeye ulaş

Web sitesinde resimlere CSS ile nasıl efekt verilir?

Belli başlı efektleri kullanmak için CSS kodlarından yararlanabilirsiniz. Bu kodları CSS dosyasında ]></b:skin> kodunun üzerine ekleyeceksiniz.
  1. Siyah-Beyaz Efekt
    .post-body img { 
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    }
    .post-body img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    }
  2. Bulanıklık (Blur) Efekti
    .post-body img { 
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    }
    .post-body img:hover {
    filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    }
  3. Şeffaflık (Opacity) Efekti
    .post-body img { 
    opacity:0.3;
    }
    .post-body img:hover {
    opacity:1;
    }
  4. Zoom Efekti
    .post-body img { 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    .post-body img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    }
Kod içerisinde .post-body img resmin sayfadaki görüntüsünü temsil eder, post-body img:hover ise üzerine gelince oluşan görüntüyü temsil eder. Siz tam tersi efekt istiyorsanız bunların altındaki kodları yer değiştirebilirsiniz.
  • Paylaş
1

Furkan Acar, transform: scale(1,1); zaten default tur. Büyültmek için 1+ değer verilmeli.
Şahsen zoom için "background-size" tavsiye ederim.

Sonraki Soru
HESAP OLUŞTUR

İstatistikler

613 Görüntülenme3 Takipçi1 Yanıt