Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Gallery CSS3 Efek Hover Pada Gambar di Blog

CSS3 Efek Hover Pada Gambar di Blog
Gallery CSS3 Efek Hover Pada Gambar di Blog – untuk membuat efek hover pada tutorial ini terdapat 5 type hover yang berbeda sehingga untuk membuat hover image pada blog anda mempunyai banyak pilihan. Dibawah sudah saya sediakan 5 type kode CSS untuk image hover yang dapat anda pilih untuk kemudian dimasukan kedalam template blog dan mempercantik tampilan gallery image pada blog anda. Untuk memilih kode yang cocok untuk diterapkan kedalam blog, terlebih dahulu lihat demo gallery dan pilih pada type gallery tersebut jika  sudah cocok kemudian masukan kode CSS yang ada dibawah kedalam template blog anda. Setelah itu kemudian anda dapat dengan mudah membuat gallery di postingan dengan hover yang sudah anda pilih tersebut. Terdapat 5 demo image hover yang berbeda dan silahkan anda lihat pada button demo dibawah. Untuk membuat gallery image hover maka berikut adalah tutorialnya untuk cara menerapkan Gallery CSS3 Efek Hover Pada Gambar di Blog:
1. Login ke akun blogger.
2. Copy kode CSS dibawah ini kemudian klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode CSS didalam kolom tersebut).
Gallery CSS3 Efek Hover Pada Gambar di Blog
.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.effect img {
opacity:1;
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.effect .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:125px;
width:0;
height:0;
-moz-transform:translateY(-125px);
-webkit-transform:translateY(-125px);
-o-transform:translateY(-125px);
-ms-transform:translateY(-125px);
transform:translateY(-125px);
-moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
opacity:0;
-moz-transform:translateY(-125px);
-webkit-transform:translateY(-125px);
-o-transform:translateY(-125px);
-ms-transform:translateY(-125px);
transform:translateY(-125px);
-moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;

}
.effect:hover img {
opacity:0.7;
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
-ms-transform:scale(2,2);
transform:scale(2,2);
}
.effect:hover .mask {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.effect:hover a.info {
opacity:1;
-moz-transform:translateY(100px);
-webkit-transform:translateY(100px);
-o-transform:translateY(100px);
-ms-transform:translateY(100px);
transform:translateY(100px);
}
3. Klik Terapkan ke Blog.

Perlu di Perhatikan : Untuk menaruh kode CSS tidak harus seperti langkah di atas, bisa juga dengan cara klik Template > Edit HTML > lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk menampilkan Gallery CSS3 Efek Hover Pada Gambar di Blog caranya copy kode HTML dibawah ini, kemudian paste kode tersebut pada kolom posting mode HTML lalu klik Publikasikan.
<div class="view effect">
<img src="https://lh6.googleusercontent.com/-LN4orXX2EPs/Uc7k44IWE7I/AAAAAAAAFPg/b5R4bg_KuTo/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info" title="Full Image">Full Image</a>
</div>
</div>

<div class="view effect">
<img src="https://lh3.googleusercontent.com/-4vgPBXKdps8/Uc7k4HAs5nI/AAAAAAAAFPU/b_wGXIq_osc/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view effect">
<img src="https://lh3.googleusercontent.com/-6ISGaUJtN9E/Uc7k31R9S_I/AAAAAAAAFPM/Cy22cTiVfxE/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view effect">
<img src="https://lh5.googleusercontent.com/-Vnt0jVLT-D8/Uc7k3mbwGXI/AAAAAAAAFPI/Am71HH4p4Tw/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
Keterangan:
  • Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
  • Diatas adalah untuk efek hover type 1, untuk membuat type 2-5 seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.
Kode Efek Hover Type 2
CSS
.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.second-effect .mask {
opacity: 0;
overflow:visible;
border:0px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.second-effect a.info {
position:relative;
top:-10px;
opacity:0;
-moz-transform:scale(0,0);
-webkit-transform:scale(0,0);
-o-transform:scale(0,0);
-ms-transform:scale(0,0);
transform:scale(0,0);
-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity:1;
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
-moz-transition-delay:0.3s;
-webkit-transition-delay:0.3s;
-o-transition-delay:0.3s;
-ms-transition-delay:0.3s;
transition-delay:0.3s;
}
HTML
<div class="view second-effect">
<img src="https://lh4.googleusercontent.com/-iuN928NrDrY/Uc7k5AhL76I/AAAAAAAAFPk/cJjZnazHQQI/w250-h200-no/Faceblog+Evolutions+%25289%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view second-effect">
<img src="https://lh5.googleusercontent.com/-fLQQSNPkjGs/Uc7k0qAIh4I/AAAAAAAAFOo/JhrbPcyhq14/w250-h200-no/Faceblog+Evolutions+%252819%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>  

<div class="view second-effect">
<img src="https://lh6.googleusercontent.com/-rkmSREUCYLo/Uc7k0tzNcbI/AAAAAAAAFOs/h8tZWk2HJvI/w250-h200-no/Faceblog+Evolutions+%252820%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view second-effect">
<img src="https://lh4.googleusercontent.com/-8k_Ozy3SpVw/Uc7kzLg9KYI/AAAAAAAAFOc/tA4CaxbDokk/w250-h200-no/Faceblog+Evolutions+%252818%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
Kode Efek Hover Type 3
CSS
.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
HTML
<div class="view third-effect">
<img src="https://lh5.googleusercontent.com/-c90pCDltYkg/Uc7kyt3Q66I/AAAAAAAAFOY/tcjlIFDn9NM/w250-h200-no/Faceblog+Evolutions+%252817%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view third-effect">
<img src="https://lh3.googleusercontent.com/-XAEE8JqCYgY/Uc7kyDtEhkI/AAAAAAAAFOI/yiU3Oz1GA20/w250-h200-no/Faceblog+Evolutions+%252816%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>  

<div class="view third-effect">
<img src="https://lh4.googleusercontent.com/-nDj5MnChnfA/Uc7kyL-1RNI/AAAAAAAAFOM/N_e_fUO1oxE/w250-h200-no/Faceblog+Evolutions+%252815%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view third-effect">
<img src="https://lh6.googleusercontent.com/-QNjuCWVlEsw/Uc7kxd0-rKI/AAAAAAAAFN8/Nwx8QQ7jwx4/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
Kode Efek Hover Type 4
CSS
.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.fourth-effect .mask {
position:absolute; /* Center the mask */
top:50px;
left:100px;
cursor:pointer;
border-radius: 50px;
border-width: 50px;
display: inline-block;
height: 100px;
width: 100px;
border: 50px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
opacity:1;
visibility:visible;
-moz-transform:scale(4);
-webkit-transform:scale(4);
-o-transform:scale(4);
-ms-transform:scale(4);
transform:scale(4);
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
opacity: 0;
border:0px solid rgba(0,0,0,0.7);
visibility:hidden;
}
HTML
<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://lh3.googleusercontent.com/-R3oxg7pLrUQ/Uc7kxHnUqQI/AAAAAAAAFN0/4xyeF9rO5p8/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg" /></a>
<div class="mask"></div>
</div>

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-bhNMR21h5eM/Uc7kwXeZoYI/AAAAAAAAFNk/dEhuMUY4EFU/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg" /></a>
<div class="mask"></div>
</div>

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-luGfMboNxZE/Uc7kwNNhwWI/AAAAAAAAFNg/vJ7Z6TUHyUw/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg" /></a>
<div class="mask"></div>
</div>

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-6ilkN7_0Rps/Uc7ku29b1eI/AAAAAAAAFNU/eDPlfvimshI/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg" /></a>
<div class="mask"></div>
</div>
Kode Efek Hover Type 5
CSS
.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://lh6.googleusercontent.com/-7BSFqWfEXvU/Uc7ncL8r1RI/AAAAAAAAFQE/k6LvkQ1BQuQ/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.fifth-effect img {
opacity:0.2;
-moz-transition: all 0.3s ease-in;
}
.fifth-effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.fifth-effect:hover img {
opacity:1;
}
HTML
<div class="view fifth-effect">
<a href="#"><img src="https://lh3.googleusercontent.com/-20mQJIpgwmw/Uc7k2xhbmPI/AAAAAAAAFO8/bfkjRsKkSDw/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" /></a>
<div class="mask"></div>
</div>   

<div class="view fifth-effect">
<a href="#"><img src="https://lh5.googleusercontent.com/-FCRREgwPbsY/Uc7k2vXokxI/AAAAAAAAFO4/wioFYlP667c/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" /></a>
<div class="mask"></div>
</div>   

<div class="view fifth-effect">
<a href="#"><img src="https://lh4.googleusercontent.com/-9XttOxLcy-c/Uc7k5DItg2I/AAAAAAAAFPs/n-Uw_MoxZz8/w300-h200-no/Faceblog+Evolutions+%25282%2529.jpg" /></a>
<div class="mask"></div>
</div>   

<div class="view fifth-effect">
<a href="#"><img src="https://lh4.googleusercontent.com/-HalPVQkXh3E/Uc7kwuVDwdI/AAAAAAAAFNw/NTv_AlX3HO4/w300-h200-no/Faceblog+Evolutions+%25281%2529.jpg" /></a>
<div class="mask"></div>
</div>

Berlangganan artikel via email

25 Response to "Gallery CSS3 Efek Hover Pada Gambar di Blog"

banyak banget kreasinya mas,,,,ndak susah tuh bikinnya. idenya selalu baru

Balas

kode CSS nya tidak bikin loading blog kan Sob,,,hm kapan kapan saya akan coba praktek di blog saya juga Sob,,,

Balas

Bolej juga nih infonya, izin nyimak dan comot ya sohib...
Tq sudah berbagi dan semoga sehat dan sukses selalu ya...

Balas

keren banget mas bro,wajib dicoba nih,,,

Balas

yang keempat lucu.. kayak di air,, tapi ini jadi manual ya, harus ngasi kode setiap postingan.

Balas

Keren abis mas..tutornya :)

Btw..jd ga konsen nih utak atik kodenya....
Kalo sambil ngeliat foto screenshotnya...wkwk :D

Balas

bagus sekali artikelnya sobat, sangat bermanfaat

Balas

keren mas.... tapi mamang puyeng ah kutak katik nya belum paham masalah css dan html '''' baca lagi ah siapa tau sekarang paham

Balas

Wah memang mantap sekali sobat, sayangnya saya mengotak atiknya agak payah juga dan belum berhasil, mungkin perlu dicoba terus kali ya sob. okelah pokoknya tutorialnya sangat berguna dan bermanfaat sekali sobat
terima kasih sudah berbagi

Balas

kalo langsung di terapin di Templatenya, tanpa kode pemanggil div class. Menurut saya lebih praktis sob, cuma kita harus menyesuaikan templatenya juga hehe :D

Balas

tutor mantap....bisa dicobat nih buat blog ane yang baru...salam knal dan salam sukses semua ya..

Balas

ijin belajar sobat siapa tau bisa hehehe,,,makasih sudah berbagi trik

Balas

jadi lebih terlihat keren dengan hover ya sobat...

Balas

mas andes memang Top deh.. hehehe.. :)

Balas

Wah mantap dan keren dengan efek CSS3nya. Terima kasih Mas tutornya.

Balas

CSS3, apapun jika sudah disentuhnya mesti keren :D

Balas

Pengen deh sekali" gtu klo comment di blognya mas andes it panjang .
Tp apalah daya ga pernah nyambung . Hehe maklumin aja ya mas :D
keren banged deh klo soal otak atik CSS bgtuan mah emng mas andes gda duanya ..

Balas

ckckck...mantep wal hebat nih si mas ...tak praktek dulu ahhh

Balas

mantap mas, sambil jalan-jalan nambah pengetahuan tentang yang beginian...

Balas
avatar
Anonymous

wah.. mantep... buanyak pilihan... nih... gak ribet bikinya mas?????

Balas

hadir di malam minggu sobat apakabar?

Balas

type 4 tidak berfungsi Bos,padahal sudah sesuai dg scripnya.

Balas

keren banget gan :D
kapan2 mampir ya http://nandarious.blogspot.com/

Balas

bagus nih efek dari css3 untuk memperindah tampilan blog.
oh..ya..., saya follow nih blog sukses 106

Balas

keren mau coba tapi pas banyak css, trus takut dampak ke load blog

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Gallery CSS3 Efek Hover Pada Gambar di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode