Resim Yakınlaştırma Efekti

Blog ve sitelerinizde düzenlediğiniz içeriklerinize, konu ile ilgili olarak bir yada birkaç tane resim ekleme gereği duyabilirsiniz.Eklediğiniz resimlere farklı görünümler kazandırarak,içeriklerinizi ilgiyi artırabilirsiniz.

Bu yazımızda farklı bir efekt ile resim görünümlerini nasıl değiştirebileceğimizi anlatacağız. İnternet ortamında girdiğiniz sitelerde sık karşılaşmaya başlanan ve oldukça ilgi çeken resim yakınlaştırma efektini bir kaç basit işlemle sizde uygulayabilirsiniz.
Bunun için yapmanız gereken altta verilen kodları sitenizin header.php dosyasına yerleştirmektir.

<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ştırma oranını ” scale(1.5);” içinde değiştirebilirsiniz.Buradaki “ 1.5 ” değeri resmin büyüme değeridir.

Kodları header.php içinde <head> içine yapıştırın ve daha sonra altta verilen kodları bileşenlerde yada yazı içinde html editörde yapıştırın

<div id=”zoom”>
<div>
<img src=”Resim bağlantı adresi” alt=”” width=”300″ height=”200″ />
</div>

Resim Bağlantı adresi ve boyutlarını (kırmızı işaretli) kendinize göre düzenleyiniz.

örnek resmi inceleyiniz.

GeladaBaboons_ROW11774552533

Kaynak:http://siteefektleri.jimdo.com/

WordPress kullanıcıları resim yakınlaştırma efektini eklenti ile düzenlemek isterlserse,bunun için Wordpress eklenti sitesinden Kolay FancyBox eklentisini indirerek,kullanabilirler.

%d blogcu bunu beğendi: