Info Tips Trick Tutorial.

Jumat, 20 Oktober 2017

Cara Membuat Efek Zoom Image pada Gambar di Blog

Cara Membuat Efek Zoom Image


Cara Membuat Efek Zoom Image pada Gambar di Blog - Hallo sahabat , Pada artikel yang anda baca kali ini dengan judul Cara Membuat Efek Zoom Image pada Gambar di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Baca jugaCara Otomatis Menambahkan Link Sumber Artikel Blog

Cara Membuat Efek Zoom Image pada Gambar di Blog


Oke langsung saja anda ikuti langkah berikut ini :

CSS


* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {
 width: 245px; height: 245px;
 position: absolute;
 border-radius: 100%;
 box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
 0 0 7px 7px rgba(0, 0, 0, 0.25),
 inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
 background: url('http://3.bp.blogspot.com/-o0RW1RJSpdI/VU2ZSn_rfPI/AAAAAAAAEsY/vk4IQAr8Us0/s1600/seocips-image-effect-demo.jpg') no-repeat;
 display: none;
}
.small { display: block; }


Ganti kode berwarna kuning di atas dengan url gambar kamu

HTML


<div class="magnify">
 <div class="large"></div>
 <img class="small" src="http://3.bp.blogspot.com/-o0RW1RJSpdI/VU2ZSn_rfPI/AAAAAAAAEsY/vk4IQAr8Us0/s1600/seocips-image-effect-demo.jpg" width="200"/>
</div>


Ganti kode berwarna kuning di atas dengan url gambar kamu.

Javascript dan Jquery


<script src="https://cdn.rawgit.com/Brando07/haisob/newbe/frefixfree1.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/haisob/newbe/frefixfree2.js" type="text/javascript"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>


Demikianlah Artikel Cara Membuat Efek Zoom Image pada Gambar di Blog

Sekianlah artikel Cara Membuat Efek Zoom Image pada Gambar di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Cara Membuat Efek Zoom Image pada Gambar di Blog Rating: 4.5 Diposkan Oleh: IRZAN ZULMI