Home / script / Widget / Contoh Foto Galery Efek Zoom

Contoh Foto Galery Efek Zoom


Menyusun Foto dengan Efek Zoom pada Posting Blog


Membuat gallery foto dengan CSS kedengarannya sangat menarik sekali, karena dengan menggunakan CSS tentunya akan banyak menghasilkan triks-triks yang bagus misalnya yang sedang saya bahas sekarang ini mengenai cara membuat image/foto gallery menggunakan CSS3.

Tutorial menggunakan CSS yang disajikan sekarang ini sangat menarik sekali apalagi ditempatkan di blog, misalnya dengan koleksi foto-foto yang menjadi idola anda, tentunya sangat tepat untuk ditempatkan di blog anda sebagai koleksi album atau photo galeri.





Dengan MenDesaign gambar atau gallery photo yang rapi dan menarik untuk di pandang, tetapi tidak membutuhkan tempat yang banyak? Mungkin inilah Solusi yang anda cari. 

Cara Mudah Membuat Gallery Photo di Blog, jika anda tertarik anda bisa Mengikuti 7 cara yang saya posting pada blog atau pada halaman lainnya dalam artikel terkait berikut dibawah ini :

Silahkan anda lihat dan coba satu persatu Tips mana yang cocok dengan selera anda ...

- Cara Mudah Menyusun Gallery Photo di Blogspot
- CARA MEMBUAT FOTO GALLERY DENGAN TITTLE DAN DESCRIPSION
- CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM
- CARA MENYUSUN GAMBAR BANYAK DIDALAM POSTINGAN AGAR RAPI
- Trik Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal
- CARA MEMBUAT GALLERY IMAGE DENGAN CSS3
- CARA MUDAH MEMBUAT GALERI FOTO PADA BLOGSPOT
- 7 Cara Mudah Membuat dan Menyusun Gallery Photo pada Posting Blog


Anda sekarang berada dihalaman 
CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM



Bagaimana cara membuat image/photo gallery menggunakan CSS3? Caranya mudah, anda hanya membuat sebuah postingan dan tempatkan kode-kode yang akan saya berikan pada postingan anda dalam posisi HTML, cukup paham bukan? Ok sekarang anda coba arahkan kursor mouse anda ke gambar dibawah ini untuk melihat hasilnya.

Yang lebih menarik lagi dari image gallery dengan css3 yaitu adanya efek hover yang apabila mouse didekatkan atau diarahkan ke gambar atau foto gallery maka foto/gambar tersebut akan membesar. Cukup menarik bukan? Belum terlihat menarik kalau belum anda yang mencobanya.


TEST IMAAGE 
Silahkan lihat dan arahkan kursor anda pada Gambar dibawah



















========================

dibawah Ini kode CSS3 efek hover untuk galllery photo yang harus anda masukkan di dalam postingan anda, ingat harus posisi HTML ya?


<style type="text/css">
ul.gambar{padding:230px; border:3px solid #000;     position:relative;     list-style:none;-webkit-box-shadow:7px 4px 10px rgba(0,0,0,.4); -moz-box-shadow:7px 4px 10px rgba(0,0,0,.4);   &nbsp: -moz-border-radius:20px;     -webkit-border-radius:20px;     background:-webkit-gradient(radial,45 45,50,50 10,640,from(#444),to(#333)) !important;    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHT8Mukm3oo7pJy6Fv9eChqeWoi8rKveskriRK_IghMIb2Y5tAvyCRqLqq4-UEBT0VtKPRpfwk5MOFi1dfWlsCkrvM7LGM5d3ruL3G7dopYUwyUl0xKB8mGOQr_A0Ed3vZDl3tEBvqGI/s200/batuakik.jpg)}
ul.gambar li{    position:absolute;     top:50%;     left:50%;     padding:6px 6px 40px 6px;      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaefRcB_9q7yufVssVvOw6tD0sdh4U7fQtbDJOz-3qiNFkWLXEjDKWu8_4mqfRV3uGLXuRPKIXuU6uIFH9nXlr7XID7JJ0irexDmcKYIN56zpb3bxbjMunTjdCMsvN3tJ2ZgUc5GkyvI/s320/granitetilemed.png); width:150px;  height:120px;  -moz-border-radius:15px;  -webkit-border-radius:15px;  -moz-box-shadow:1px 1px 6px #222;  -webkit-box-shadow:1px 1px 6px #222;  box-shadow:1px 1px 6px #222;  -webkit-transition:all 3s ease-in-out;  z-index:0}
ul.gambar li img{ width:100%;  height:100%}
ul.gambar li:nth-child(1){ margin-top:-130px;  margin-left:-130px;  -moz-transform:rotate(30deg);  -webkit-transform:rotate(30deg);  transform:rotate(30deg)}
ul.gambar li:nth-child(2){ margin-top:-120px;  margin-left:-10px;  -moz-transform:rotate(19deg);  -webkit-transform:rotate(19deg);  transform:rotate(19deg)}
ul.gambar li:nth-child(3){ margin-top:-10px;  margin-left:-180px;  -moz-transform:rotate(-10deg);  -webkit-transform:rotate(-10deg);  transform:rotate(-10deg)}
ul.gambar li:nth-child(4){ margin-top:-50px;  margin-left:-80px;  -moz-transform:rotate(12deg);  -webkit-transform:rotate(12deg);  transform:rotate(12deg)}
ul.gambar li:nth-child(5){ margin-top:20px;  margin-left:30px;  -moz-transform:rotate(-20deg);  -webkit-transform:rotate(-20deg);  transform:rotate(-20deg)}
ul.gambar li:nth-child(6){ margin-top:-210px;  margin-left:-280px;  -webkit-transform:rotate(-20deg);  -moz-transform:rotate(-20deg)}
ul.gambar li:nth-child(7){ margin-top:20px;  margin-left:150px;  -moz-transform:rotate(60deg);  -webkit-transform:rotate(60deg);  transform:rotate(-20deg)}
ul.gambar li:nth-child(8){ margin-top:-190px;  margin-left:90px;  -moz-transform:rotate(19deg);  -webkit-transform:rotate(19deg);  transform:rotate(19deg)}
ul.gambar li:hover{ z-index:10;  width:480px;  height:322px;  margin-top:-170px;  margin-left:-240px;  -webkit-transition:opacity;  -moz-box-shadow:8px 8px 24px #111;  -webkit-box-shadow:8px 8px 24px #111;  box-shadow:8px 8px 24px #111;  -moz-transform:rotate(0deg);  -webkit-transform:rotate(0deg);  transform:rotate(0deg)}
</style>

<ul class="gambar">
<li> <img height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxaFKqavub5Q5Z18l9I36-_cRSNbE7AFdoU3_WGV2lAQuNbf3vMrF9TTeK2ImqqBaMrbSdCv5KmVFukJTdlGLHbfXyXQCFB-4CXOuOuSdAwGeXN3VRIfPEom1X-G_vKa7d6hCf0TnHd3L/s1600/Annamaria+Rakosi16.jpg " title=" Annamaria Rakosi " width="480" /> </li>
<li> <img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUdTP5KjWS5RRFLUhYtPn-LrEb99kA5Ol3L1bPGV6ahrXWQuMhKrmw5Y7G7ZoZwqc4iZYNkS0YmFtmmjRYQ8Wo8KM8cVzoF5r1_9iayK-eQMnj0XjyrzP1RUgGpX9ttZOdYwAYHcjkqaf/s1600/Sarah+Baderna9.jpg " title=" Sarah Baderna " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZybvvUfn5kUTg-tQpXfciZXzKx-SuU8gN1zzEUUJ5OV1sFuPGIoEHwUdiG-PktO12Z3eiK_y2N4WJcBTo4qXQ6hO1Y0OO0vge8xgY3MGhkQhbnr7WQKGLCtmAQPgsW3fkNpr2SAUU7Jt5/s1600/Gina+Hargitay5.jpg" title=" Gina Hargitay " width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJc73gkfxl4cpe-0Sz488oBHE2oQQgDTdckSEU6cfeUADKkT7yCPHQmsd_W4JUlhebS2Se6xkM0CV-kfMhLVn0SKXyWYN8t8tU-LsQi2HxizUP7vt0pVvz2NcdgJkxCgNF5wB_nLwl2tLC/s1600/Michiko+Tanaka2.jpg " title=" Michiko Tanaka " width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwdAK0lwG1A5nah3Jc7OKcj1EOH2QWP327-IfGUmxuC37jIAodL10ygNZl2TAszG2jTbl8BY3xQw-4nTng-RxwKYTwPuDNjxye3Ok9WbJJvH7EZhJNEkoh-sx1thFMzSPvgULDILjDWM2/s1600/Sarah-Lorraine+Riek2.jpg " title=" Sarah Lorraine Riek " width="480" /></li>
<li><img camille="" height="322" munro="" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWcvn1bLbRbO-apMJbAAwCSSBHvAbDTrtEo8k21SJAmgQxUz8nb4gqQF6vQquZGN9rGqbKoeEsC9L0zQ2441KAkdhKAvkho654etfHckQVllMtslr-4O_9bdPiPBLxbpUS3sM9YMvLaua/s1600/Camille+MUNRO6.jpg " title="”" width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_nQd5WkJ40trXFZmShDgwKKBybGISBbSW3LwVQDI5ZZqoaXFNIS5CSRp8qXepoWMDuUZKrmG-bZQZQBwvB4j_M6avdP1w1-aE-2UxP65Oz5OAYv6dtEJBy1KtrmrnGFlJPNQ0Y0Cqs8e/s1600/Daniella+OCOR%C3%935.jpg " title=" Daniella OCORÓ " width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkdXPMn9C4FRVAL1AISw5slhxrqiqeKeYY-l7QAXOFzx7FrpntlhVJO2Qypmn7POFPQTxg5mCsdtf3tOtK4vvYKmQudj0EzGekM9s-_4mgwen0WCSuZvw81fKEVCCtj-26ECs6gOdT1Ii-/s1600/Eva+DOMBROVSKA7.jpg " title=" Eva DOMBROVSKA " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOem3bFZoEBzFUPvpCirLhh3UrMRGAPx-JBQLtUFBmIuBcE2vD79pr8oeEIttheAKZ8CtJs4fQN-lcESPnpQyyJ_5bjicbX691fqQMtrp3SrNVswt84d-Lozq4h2lBsIuxfrQpdynlECy/s1600/Melinder+Bhullar6.jpg " title=" Melinder Bhullar " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3OG_NTaC7Njp6b7PS1WZiTr-fVyvRIu8VDvLEOxmzqXY6yrJghDNftA8k0cyUpRRZJgM75I6WI_6WbLFyy257qkP9s8KGbdJOaUt6sVQUxo1XPvSr3okWtjTQW3fCW4aa4pkLWsTfbBEF/s1600/Ivana+MILOJKO15.jpg " title=" Ivana MILOJKO" width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2uiFjiuoNKtxRXI09cTsxQ0u2fkZxLSuqvlqQ91yDhMIU6kRqs0wQNZEwQxPNoGX3-6poJmDlH3xl6NZQf4p0xygqVKJ28JW9jU87OUK3Ys61rJbgKC0oW3cb9S0V-a1PCbkWdWLFBkKc/s1600/Luz+Mery+DECENA+RIVERA6.jpg " title=" Luz Mery Decena RIVERA " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORUrnepw6TSIneqsPcaJyiXnzBhouq9VC4B3rk7M1P6w37YJG75hZAzLmCSA-hllEh0n9JBObvDGevgnvJ-k-PjNBLhp8s7oZ6dqEXPU20JSflGmIfgeMniSoWy60afLHMCuQIW007yeF/s1600/Coral+RUIZ+REYES2.jpg " title=" Coral RUIZ REYES " width="480" /> </li>
</ul>


Keterangan :
Teks warna merah silahkan anda ganti dengan url gambar atau image anda sendiri dan Teks Title ganti dengan title gambar anda. 

------------------------------------------------------
Sampai disini postingan Cara Membuat Gallery Foto dengan efek Zoom sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya,

Setelah anda mengerti Cara Membuat Gallery Foto dengan Efek Zoom pada posting Blog, mungkin anda tertarik untuk bisa memasang Gambar dengan menggunakan CSS pada blog anda, silahkan anda baca pada artikel CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Semoga postingan CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber Mitra terkait;
http://wwbisnis.blogspot.com
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com


Contoh Foto Galery Efek Zoom Rating: 4.5 Diposkan Oleh: as