Aşağıdaki kod ile resimlerinize yakınlaştırma (zoom) efekti ekleyebilirsiniz. Bunun için kodu sitenizin Head bölümüne yerleştirin.
<style type="text/css">
/*<![CDATA[*/
/* Site Efektleri */
#zoom img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#zoom img:hover {
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
}
/*]]>*/
</style>
Yakınlaşma oranını buradan "scale(1.5)" değiştirmeniz mümkün. Kodun bu halinde fotoğraf bir buçuk katı oranında bütüyülür.
Son olarak bu kodu da bir bileşenler / HTML öğesi içine kopyalayarak istediğiniz noktaya yerleştirmeniz gerekir.
<div id="zoom">
<div>
<img src="RESIM BAĞLANTISI" alt="" width="200"
height="100" />
</div>
Resim Bağlantısı bölümünü (kırmızı işaretli) dilediğiniz başka bir resimle değiştirebilirsiniz.
Fotoğrafın boyutunu da (yeşil işaretli) yeniden belirlemeniz mümkün.
Pek çok kodu kullanmak için resimlerinizin bağlantı adreslerini koda eklemeniz gerekir. Bunu nasıl yapabileceğinizi buradan öğrenebilirsiniz.
Kod ile ilgili soru ve yorumlarınızı buradan iletin.
Neriman (Friday, 17 April 2020 13:47)
nnnnn
Ahmetozturk (Sunday, 21 July 2019 14:57)
ALINTI [Merhaba, kod gayet başarılı bir şekilde çalışıyor ancak bir sayfada birden fazla fotoğraf olduğunda (galeri gibi düşünün) sıralamaya göre sanırım fotoğrafların altında kalıyor. Tam olarak üste çıkması için ne yapmak gerekir.
Yani bir sayfa içeriğine 3x6 adet fotoğraf eklediğimi varsayarsak bunları html kod sıralamasına göre, fotoğraf büyüyünce diğer fotoğrafların altında kalıyor. Büyütülen fotoğrafın en üstte görünmesini ve mümkünse sayfanın tam merkezinde olmasını sağlamak istiyorum.]
Sorunu çözdüm, div katmanına göreceli bir pozisyon atadıktan sonra z eksenindeki değerini maksimum olarak ayarladım. Böylece fotoğrafların en üstüne çıkıyor büyüyen fotoğraf. Ancak sayfada nasıl ortalayabilirim bilemedim. Hala araştırıyorum, sizin bilginiz varsa cevabınızı bekliyorum.
Ahmetozturk (Sunday, 21 July 2019 14:41)
Merhaba, kod gayet başarılı bir şekilde çalışıyor ancak bir sayfada birden fazla fotoğraf olduğunda (galeri gibi düşünün) sıralamaya göre sanırım fotoğrafların altında kalıyor. Tam olarak üste çıkması için ne yapmak gerekir.
Yani bir sayfa içeriğine 3x6 adet fotoğraf eklediğimi varsayarsak bunları html kod sıralamasına göre, fotoğraf büyüyünce diğer fotoğrafların altında kalıyor. Büyütülen fotoğrafın en üstte görünmesini ve mümkünse sayfanın tam merkezinde olmasını sağlamak istiyorum.
MaCro` (Friday, 02 November 2018 21:16)
sDİA
Milava (Wednesday, 07 March 2018 16:05)
Yapabilirsin .
eda (Friday, 31 March 2017 12:05)
çok iyi bence
koksal (Wednesday, 30 September 2015 20:41)
merhaba;
kodu siteme koydum ön izlemede çalışıyor ama sunucuya attığımda boş çerçeve oluyor muhtelemen resim sunucuya atılmıyor htlm koddaki adresten dolayı çalışmıyor oluyor.yardım edebilirmisiniz
Site Efektleri (Monday, 10 November 2014 11:40)
Merhaba sinlenbec,
Kodlar sitenin belirli tanımlı bölgelerini almıyorsa kullanılabilir. Sitende deneyerek görebilirsin.
Selamlar.
sinlenbec (Sunday, 09 November 2014 22:12)
Merhaba..
Bu kodlar WordPress site için düzenlenebilir mi?
İyi çalışmalar