Gallery Image Efek Hover Pada Blog

Gambar yang sangat banyak dan ukuran image yang belum tentu sama pada saat di upload kedalam satu posting tentu tidak akan membuat rapi dan teratur bukan, namun tidak demikian halnya jika anda sudah mengatur elemen image secara rapi dan tentu hal tersebut labih membuat posting blog lebih teratur dan tidak berantakan dengan adanya banyak gambar yang berjajar tidak sesuai ukuran. Jika mungkin berminat silahkan lihat pada halaman demo dengan tekan tombol button dibawah, jika menurut anda suka silahkan bisa diterapkan untuk custom blog anda. Berikut adalah tutorial cara membuat 10 Gallery Image Efek Hover Pada Blog:

1.Login ke akun blogger.

2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWTo4daW0qx4GW6hu7mZ3MYgrWH0oZoMr9hYgYybOu_vXp-pKuQwCHXPxrS5IdpLiVl0V05Vl-A7SObGZ6Bxy35vf8NayQzxj-V24yqvsvPmM7l02enojYmGzpCKTwCKA_d2nHWMCS8Bo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-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;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan 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. Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML.

<div class="view view-first">
<imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-oGKpVLExg9QVzxxTQVGWc8jP9d-laWmLDurejT_5riH_krcnCz134Bt2OPz5Ifjzj6qBkbBSoCvn9f4hmJ-dyxs2PIPBe1VjLPRRyUuF1U_qw2lt6tDTRPGf5hwTVZ_jjnlqLkxga28/s1600/kematian.jpg" />
<div class="mask">
<h2>
Hover Style #1</h2>
Tutorial blog | SEO | HTML | CSS | jQuery
<a class="info" href="http://www.mycirebon.net/">Read More</a></div>
</div>
<div class="view view-first">
<img src="#" />
<div class="mask">
<h2>
Hover Style #1</h2>
Tutorial blog | SEO | HTML | CSS | jQuery
<aclass="info"href="https://draft.blogger.com/blogger.g?blogID=5108880315654323921#">Read More</a></div>
</div>
<div class="view view-first">
<img src="#" />
<div class="mask">
<h2>
Hover Style #1</h2>
Tutorial blog | SEO | HTML | CSS | jQuery
<aclass="info"href="https://draft.blogger.com/blogger.g?blogID=5108880315654323921#">Read More</a></div>
</div>
<div class="view view-first">
<img src="#" />
<div class="mask">
<h2>
Hover Style #1</h2>
Tutorial blog | SEO | HTML | CSS | jQuery
<aclass="info"href="https://draft.blogger.com/blogger.g?blogID=5108880315654323921#">Read More</a></div>
</div> 

Keterangan:
Ganti "#" dengan URL halaman web dan gambar yang di inginkan. Jika sudah sesuai silahkan klik Publikasikan.

Tutorial di atas adalah untuk efek HOVER STYLE 1, untuk membuat HOVER STYLE 2 - 10 maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.

Special Thanks : mas-andes.blogspot.com

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts