Efek Figure

Membuat Efek Figure According Pada Gambar

Gambar dengan According efek merupakan susunan suatu gambar yang saling menutupi antara gambar yang satu dengan yang lain dalam satu frame, sangat berbeda penerapannya pada blog saat Membuat Efek Lensa Flip 3D Pada Gambar di artikel sebelumnya, dengan efek ini anda bisa menyisipkan beberapa gambar dalam satu tampilan album/bingkai, akan tetapi semua gambar akan dapat terlihat dengan hover klik mouse pada gambar, singkatnya ibaratkan pada sebuah buku yang apabila anda ingin melihat halaman tengah maka halaman awal akan terlihat terlebih dahulu, tetapi anda bisa langsung menuju halaman tengah tanpa melihat halaman awal.

Nah..!! jika anda sudah paham cara kerja efek figure according ini, berikut cara Membuat Efek Figure According Pada Gambar:

1. Login ke-Blogger anda
2. Pada dashboard pilih opsi Template >> Sesuaikan >> Tingkat Lanjut
3. Lihat pilihan sebelah kanan, CSS >> selanjutnya Copy Kode berikut pada kolom CSS tersebut
4. Terapkan ke Blog

.ia-container {
width: 535px;
overflow: hidden;
box-shadow: 1px 1px 4px #52e052;
border: 7px solid #52e052;
}
.ia-container figure {
position: absolute;
top: 0;
left: 50px;
width: 335px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
-webkit-transition: all 0.3s ease-in-out;
-moz-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;
}
.ia-container > figure {
position: relative;
left: 0 !important;
}
.ia-container img {
display: block;
width: 100%;
}
.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.ia-container input:checked{
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
left: 335px;
}
.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-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;
}
.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}
.ia-container input:checked + figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
top: 50%;
}
.ia-container #ia-selector-last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}
.ia-container input:checked ~ figure input{
z-index: 1;
}
@media screen and (max-width: 720px) {
.ia-container {
width: 540px;
}
.ia-container figure {
left: 40px;
width: 260px;
}
.ia-container input {
width: 40px;
}
.ia-container input:checked ~ figure {
left: 260px;
}
.ia-container figcaption span {
font-size: 16px;
}
}
@media screen and (max-width: 520px) {
.ia-container {
width: 320px;
}
.ia-container figure {
left: 20px;
width: 180px;
}
.ia-container input {
width: 20px;
}
.ia-container input:checked ~ figure {
left: 180px;
}
.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}
}
figure {
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

Untuk Memanggil efek according figure pada gambar dalam postingan anda, selanjutnya Copy Kode HTML berikut pada postingan baru anda mode HTML

<div class="ia-container">
<figure>
<img src="http://2.bp.blogspot.com/-f9Xune8fxt0/UqsEK02qARI/AAAAAAAAAJI/kxTyPw2nMd4/s1600/537013_418311688257461_454169965_n.jpg" alt="SAHABAT BLOGGER 77" title="Devy Indriyani 1"/>
<input type="radio" name="radio-set" checked="checked"/>
<figcaption><span>Devy Indriyani 1</span></figcaption>
<figure>
<img src="http://1.bp.blogspot.com/-aMsiiBUURRk/UqsELCG897I/AAAAAAAAAJQ/8KX2y16GImg/s1600/734662_418084968280133_439055412_n.jpg" alt="SAHABAT BLOGGER 77" title="Devy Indriyani 2" />
<input type="radio" name="radio-set" />
<figcaption><span>Devy Indriyani 2</span></figcaption>
<figure>
<img src="http://3.bp.blogspot.com/-Xoz4xhSXTz4/UqsELhEwVlI/AAAAAAAAAJo/kSbLZVZikNc/s1600/954694_471525259602770_1143922799_n.jpg" alt="SAHABAT BLOGGER 77" title="Devy Indriyani 3" />
<input type="radio" name="radio-set" />
<figcaption><span>Devy Indriyani 3</span></figcaption>
<figure>
<img src="http://4.bp.blogspot.com/-39vsMAtH41U/UqsEMPJyWSI/AAAAAAAAAJg/KsY2XJmeiWU/s1600/994778_471504179604878_1881200538_n.jpg" alt="SAHABAT BLOGGER 77" title="Devy Indriyani 4" />
<input type="radio" name="radio-set" />
<figcaption><span>Devy Indriyani 4</span></figcaption>
<figure>
<img src="http://4.bp.blogspot.com/-tDzWbSqQUo8/Un-buNof1qI/AAAAAAAAAH0/xe8qwL1oSOw/s1600/tanda-panah.jpg" alt="SAHABAT BLOGGER 77" title="Devy Indriyani 5" />
<input type="radio" name="radio-set" />
<figcaption><span>Devy Indriyani 5</span></figcaption></figure>
</figure>
</figure>
</figure>
</figure>
</div>

Selanjutnya tinggal publikasikan artikel anda,dan lihat hasilnya. Semoga galery gambar blog anda semakin terlihat menarik dengan Membuat Efek Figure According Pada Gambar.

Selamat Berkreasi