Efek Slide merupakan cara untuk menampilkan Gambar atau foto yang bisa bergerak dari kanan ke kiri, efek berjalan bahkan efek bergantian saat kursor mengklik salah satu gambar tersebut. Tentunya secara umum efek slide pada gambar digunakan dan diletakkan di bagian Header.
Namun, kali ini saya akan memaparkan bagaimana Gambar atau foto anda menjadi menarik ketika diklik dengan efek slide muncul tenggelam (bahasa saya ya!!). Untuk membuat Efek Slide Gambar di Postingan Blog tidak terlalu sulit kok !!, hanya dengan menggunakan beberapa kode yang cukup anda Copy dan paste ke dalam Postingan Blog. Berikut:
1. Masuk ke Blog anda
2. Edit atau Buat Posting artikel Baru
3. Buka menu HTML bukan Compose
4. Copy Kode CSS dibawah dan Paste ke dalam Postingan
<style>
.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;
}
</style>
<div class="ia-container">
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxk-cBc2nebAbox3q7njd7DMa9qrq9RS3mmzV4Q5BLfzfMzlorp2QN-xVGSac386m9f9mYjajmHSkAHBU25itS80LGmbX5T8Egfv_Mu-hdHetrLRFFmw5LIP1_ZTFw-5CsxoFF5Fi9vY/s320/SF.jpg" alt="wandykambuno.com" title="Boleh di Coba"/>
<input type="radio" name="radio-set" checked="checked"/>
<figcaption><span>Gambar 1</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEmbWCGvSovbdFhSMtf9LTEYRJ3rxb65_gEDioiHz86c_MqOfU4CjHphuONoaFAnhxnKOE720fr_E85znm9RsFm9GU7uuQ659R2Sj9VBP57x0Q6Oh1QfQ_J-2PIaQ3CwXx4r7HcdQdgI/s320/WA.jpg" alt="wandy" title="wandykambuno.com" />
<input type="radio" name="radio-set" />
<figcaption><span>Gambar 2</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BVLboFQNf9fanfZxyRBy_G-rZhUDijanThf_XgweUjgync4jQ68Y_Bd5Az1Ys1YokvLzodQVp-AQCgp7kUX2sZuzFub4rNcwCZnaISWfGKUQcrLpNxUvdOPj4rQNFYsUTwcN6Gd_Skg/s320/WB.jpg" alt="wandy" title="wandykambuno.com" />
<input type="radio" name="radio-set" />
<figcaption><span>Gambar 3</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbkVnSsY8PiGLFhqQipaV5eliKcZaOKcxDMjrov54g3yxPTN50JRQGhiWvoImNRi-FRamCz_GKUz5LvkQ4FT8V2FGXSj4i7S2dmTDlwhhAiYi67nmy2ZXvH6p0Du06rUC1YkNAaumzi1w/s320/WH.jpg" alt="wandy" title="wandykambuno.com" />
<input type="radio" name="radio-set" />
<figcaption><span>Gambar 4</span></figcaption>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3PJcZpajQjSOYLHCe-7sx-aoBaBs0kWiDtiWUiCOyjpflfisb1JxgOYijkRVQbcdVNUrulOS0eaRCnMgWVldXb0DmIxVzYYXvR0ymEq4R1HhaxyYSIod63tX43bBCe5nPJUa67oNzbmU/s320/WS.jpg" alt="wandy" title="Popular post Terwujud" />
<input type="radio" name="radio-set" />
<figcaption><span>Gambar 5</span></figcaption></figure>
</figure>
</figure>
</figure>
</figure>
</div>
Terima kasih
Tidak ada komentar:
Posting Komentar
Terima kasih telah berkunjung ke blog ini,silahkan berkomentar dengan sopan.