CSS Membuat Original Effect di Image - Sebelum berangkat sekolah hari ini, mencoba cari referensi lagi. Kali ini kita akan buat variasi di gambar postingan kita dengan CSS Membuat Original Effect di Image. Walau judulnya tidak sesuai google AdWord karena jujur aku belum ngerti, hiiii. Oiya kembali lagi dech kita lakukan percobaan berikut ini pada postingan Blog kita.
Gambar yang bisa dijadikan percobaan bisa gambar apa aja dan sizenya coba yang kecil dulu ya, biar kagag berat di blogmu.
Kamu bisa langsung login di blogmu dan mencoba script berikut ini :
Taruh Script berikut ini di atas ]]></b:skin>
.view {
background-color:#FFFFFF;
border: 10px solid #FFFFFF;
box-shadow: 2px 3px 5px #696969;
cursor: default;
float: left;
height: 200px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
width: 250px;
}
.view .mask, .view .content {
height: 200px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 250px;
}
.view img {
display: block;
position: relative;
}
.view h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
color: #FFFFFF;
font-size: 17px;
margin: 20px 0 0;
padding: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.view p {
color: #FFFFFF;
font-family: Georgia,serif;
font-size: 12px;
font-style: italic;
padding: 10px 20px 20px;
position: relative;
text-align: center;
}
.view a.info {
display: inline-block;
padding: 7px 14px;
text-decoration: none;
text-transform: uppercase;
}
.view-third img {
box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(460px, -100px) rotate(180deg);
-moz-transform: translate(460px, -100px) rotate(180deg);
-o-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg);
-webkit-transition: all 0.2s 0.4s ease-in-out;
-moz-transition: all 0.2s 0.4s ease-in-out;
-o-transition: all 0.2s 0.4s ease-in-out;
-ms-transition: all 0.2s 0.4s ease-in-out;
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third p {
-webkit-transform: translateX(300px) rotate(90deg);
-moz-transform: translateX(300px) rotate(90deg);
-o-transform: translateX(300px) rotate(90deg);
-ms-transform: translateX(300px) rotate(90deg);
transform: translateX(300px) rotate(90deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.view-third:hover h2 {
background: none repeat scroll 0 0 #9C1813;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-shadow: 0px 1px 1px #111;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.view-third:hover p {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-third:hover a.info {
background: none repeat scroll 0 0 #9C1813;
border: 1px solid #000;
color:#FFFFFF;
text-shadow: 0px 1px 1px #111;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Kemudian Save Template kamu.
lalu masuk Edit Tata Letak kemudian Add Gadget dan pilih html/Javascript. lalu masukkan script dibawah ini ya...
<div class="view view-third">
<img src="Url-image" />
<div class="mask">
<h2>Title Gambarmu</h2>
<p>Description gambar</p>
<a class="info" href="Url-Artikel">Kata Terserah Kamu</a>
</div>
</div>
Kata yang berwarna merah silahkan disesuaikan sendiri.
Hasilnya seperti dibawah ini :
Oke, Selesai tutorial pagi ini, dan buahnya amat sangat seger walau hanya bisa memandang nya. kwkw.
Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.
0 komentar:
Posting Komentar