Cheat Run Out Template with Accordion

Salah satu cara mengakali jikalau di dalam template kita sudah kehabisan lahan untuk menampilkan sesuatu adalah dengan membuat si accordion Ada banyak sih, tetapi karena tema post yang akan AA sampaikan adalah cara membuat accordion image dengan CSS3. Akordion jenis ini sangat cocok untuk menampilkan banner iklan, screenshot blog teman, atau apapun soalnya pakai gambar :DOriginal posted by codrops.

.cont-accr {
position: relative;
width: 400px;
margin: 5px auto;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.6);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
}
.accr-panel {
top: 0;
left: 40px;
margin: 0;
width: 240px;
height: 361px;
line-height: 361px;
position: absolute;
transition: 0.3s ease-in-out;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cont-accr > .accr-panel {
position: relative;
left: 0;
}
.accr-image {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accr-tab {
top: 0;
width: 40px;
height: 100%;
opacity: 0;
z-index: 100;
cursor: pointer;
position: absolute;
}
.accr-tab:checked {
right: 0;
width: 0;
}
.accr-tab:checked ~ .accr-panel {
left: 240px;
transition: 0.7s ease-in-out;
}
.accr-capt {
width: 100%;
height: 100%;
top: 0;
position: absolute;
transition: 0.2s linear;
background: rgba(47, 79, 79, 0.25);
}
.accr-capt span {
position: absolute;
top: 40%;
margin-top: -20px;
left: 20px;
right: 20px;
text-align: center;
line-height: 10px;
font-size: 17px;
opacity: 0;
letter-spacing: 1px;
font-weight: 700;
padding: 20px;
color: #fff;
background: rgba(47, 79, 79, 0.25);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.accr-tab:checked + .accr-capt {
background: rgba(47, 79, 79, 0.25);
}
.accr-tab:checked + .accr-capt span {
opacity: 1;
top: 50%;
transition: 0.4s ease-in-out 0.5s;
}
.accr-tab:hover + .accr-capt {
background: rgba(47, 79, 79, 0.1);
}

<div class="cont-accr">
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 1</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 2</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set" checked="checked"/>
<div class="accr-capt">
<span>CAPTION 3</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 4</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab accr-tab-last" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 5</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Jika sobat ingin menambahkan kolom/area, sobat tinggal buat taging baru seperti ini

<div class="accr-panel">
 <img class="accr-image" src="LINK-GAMBAR" alt=""/>
  <input class="accr-tab" type="radio" name="radio-set"/>
 <div class="accr-capt">
<span>CAPTION</span>
</div>

Letakan tepat di bawah setelah penutup tag </div> pada CAPTION 5. Jangan lupa juga tambahkan tagging penutupnya </div> Untuk kemulusan kerja, ada bijaknya width, height, margin and padding ditentukan terlebih dahulu agar sreug bergejew brow dengan template anda :))

The other interesting sources:

• Making a CSS Only Accordion Image Slider
• Pure CSS3 Accordion Image effect
• Image Accordion Effect
• CSS sliding multi-level accordion
• Multi-Level Accordion Menu

Bonus:

Single input 3D form - Pure CSS Spiral Text Thingy - Smooth Page Scrolling in jQuery - Lettering.js Button Hover States - Pure CSS Emoji Faces - Pure CSS iOS Icons - CSS Unicode Range Generator - 111 Single Div Pure CSS Flags - Pure CSS selected layer - sin(k) on [s,e] - Simple CSS text animation - WebSlides - Table of Contents - The swinging polaroid - color palette distribution for different color spaces - Article list concept with background image - Image Mask Effect

Bay :-h