 |
| 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 juga : Cara Otomatis Menambahkan Link Sumber Artikel Blog
Cara Membuat Efek Zoom Image pada Gambar di Blog
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOgUp6F-RRZM99HfwWkB2PoZLc3LJxVBx-XtIEsSjsiN7bjdN6_zRntMWo5hbkCVhav8ZRcYshaQDUAfEQXEsF9yv4QWxq68rsSJPdGGLX4JLU-v-Pe1snuHlC2VztzmZvqhofi90jAMU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOgUp6F-RRZM99HfwWkB2PoZLc3LJxVBx-XtIEsSjsiN7bjdN6_zRntMWo5hbkCVhav8ZRcYshaQDUAfEQXEsF9yv4QWxq68rsSJPdGGLX4JLU-v-Pe1snuHlC2VztzmZvqhofi90jAMU/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.
