Gallery 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:

Demo

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).

.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>