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/AVvXsEjnYwGk7_SDVk3Vv5e4WY9bA_WMHcKa-WPOFrA4tABS7Lkq1qwro2tBEJct0cLdtVy9552DsRQkR08aixzPStwC8HSrYoN3VzeVA6k1zhlvhOUPiKNVUPdAc5fyTQhXVl-N6XlXEjcB0l-K/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/AVvXsEitDaLBh8KCqz4hDEa4Ll_lSU5QFey9Jl0WKGJtw87UnMt8ND-HkqFiGn6cNoYymZpaHJ7tEnk6E9n83BnxlKE5SjHD9XcY_pIfC6xCUIej9ul4k9oztNHFa0_qSB80jHR37c-GAv-XtAhn/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/AVvXsEhoRi0ha-zII-uH-pFTSJa3BGfpD4mtOFcPSfz_AFWPrIGgA3TkifcUAtzVsdsrTNr5ufHPkBxT9aeOXkF3QBBmvAD1MlrJo9emKAbvAW5s2db6SlA8MU3vwXKXCLAd6qD39Nq58sDtWDFy/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/AVvXsEjlQSbLX_2ZAWmTjn1XCfDKemJqzH_YbaIauxGfaZGz73ZFUYYJPDk9ZccLOW8Xih7qVH1vnNpBgp2-9WSPVHCW8dbxt_Dcd2gstPl0jl8sQANOyxgWtZPeYX6i60zW-XV1SgHR4Py0nYFS/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/AVvXsEhGqPB27uKVA-W8cd3bnHZUdStj4ivpzfB_jxAzT80NjAdXStsGtsh6QFk_I_loreHopyTnscSaOw7NnfA7k6aSdke3ygbzsoVpbgHR9Eh5WiU_JFfrlxYMYP2TMDdPaMVnOcTxs6iQZHDo/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:
Welcome to my blog 😊
