Membuat image efek Accordion CSS3 di Blog ~ blog sepot

Membuat image efek Accordion CSS3 di Blog – Sebelum nya saya pernah memposting Cara membuat efek muncul teks deskripsi pada gambar hari ini saya akan membahas tentang Membuat image efek Accordion CSS3 di Blog
Untuk memasang efek accordion image kedalam blog, Cara nya cukup simple

Berikut ini tutorialnya:

Login ke akun blogger.com.
Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik
Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS

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

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 kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya copy kode dibawah ini.

<div class="ia-container">
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-l3alPtIO_wauA4MNVvQ9jgTxXGCJZpMPvo9IbaF6Q2cO3f6RYPVGknu63e_7VpsnLE0ULCn2gYMZms_hfU5jd_FS7qjflwrQ1ie1lCkp1hhBkTNdtpEaj3bam8RqvpjFL-nkosD87S6/s1600/BIE_Demo1.jpg" alt="Blog Irvan Efendy" />
<input type="radio" name="radio-set" checked="checked"/>
<figcaption><span>Disini deskripsi gambar anda !!!</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6wM0hIJZ1pdn2zvk8xxAtF0_b3lna8mH7cK7Z_Z45xUGCIZSS8wr8MaIMXpNOJMjnLAd_lCvsadgMRHBheT4KpVXFx2DWXL184m_oKWj5ZmZjh51kuLXDCZXymaOMehuJhEXKPAk-yM7/s1600/BIE_Demo2.jpg" alt="Blog Irvan Efendy" />
<input type="radio" name="radio-set" />
<figcaption><span>Disini deskripsi gambar anda !!!</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV6GA4OWurF5ay5-iN-hlYznAc9VzRFyjODlpD-jo_KlSShiQATJgK62van9XIqlZnfbZxW1DqRRRAEvVEbhSC0f6o2dqWNbt1W8VVmmUVmJSaDGtZ0uEncR8mq5HPl__bbGuiYEldGFXL/s1600/BIE_Demo3.jpg" alt="Blog Irvan Efendy" />
<input type="radio" name="radio-set" />

<figcaption><span>Disini deskripsi gambar anda !!!</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPSMOhlkdHWHRZdhzzqRjYLiu78j6qsYKeEG5_8EZMsxvUUPLQvHDEC-3YDb8hWfkovdpYxMGQOpJ1l0dr9o3SzS-bbMeT18QmZoa4xp_C2C_dhsFfNi7m_PAulmUX7kR2JnPpr-rhgRX/s1600/BIE_Demo4.jpg" alt="Blog Irvan Efendy" />
<input type="radio" name="radio-set" />
<figcaption><span>Disini deskripsi gambar anda !!!</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLcPbOpePgcmeoXs44gjuLQ95Llfcj1tqMImxF-XV8Vv0TLTmxl6B4HyVE7JfpAANO80s8_iB-GfDTpVN1QLEW2ar8cE9OZlSJMjUPUzsW8L7gsJZcPj_A6K_UgS-Gdoq2QBnDfjHG8dbn/s1600/BIE_Demo5.jpg" alt="Blog Irvan Efendy" />
<input type="radio" name="radio-set" />
<figcaption><span>Disini deskripsi gambar anda !!!</span></figcaption></figure>
</figure>
</figure>
</figure>
</figure>
</div>

Keterangan:
Ganti URL gambar sesuai selera anda.

5. Kemudian paste di kolom posting mode HTML, selanjutnya bisa anda klik Publikasikan.

DEMO nya seperti ini:

Blog Irvan Efendy — Disini deskripsi gambar anda !!!

Terima kasih telah membaca artikel tentang Membuat image efek Accordion CSS3 di Blog di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

blog sepot

Membuat image efek Accordion CSS3 di Blog

Berikut ini tutorialnya:

DEMO nya seperti ini:

Artikel terbaru :

Artikel Terpopuler

Label