1997: Image Hover Got Something I

Image Hover Got Something I

02 December 2012

Note: Tutorial ni agak susah, sangat panjang codenya dan sangat Leceh. Mohon banyak bersabar
I. Copy code bawah ni pastu paste atas </style>
.view {
width: 250px;
margin: 10px;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.view img {
width: 250px;
display: block;
position: relative;
}
.view-third img {
width: 250px;
-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 .mask,.view .content {
width: 250px;
position: absolute;
overflow: hidden;
top: 0; left: 0;
}
.view-third .mask {
width: 250px;
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:hover .mask {
width: 250px;
-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 h1 {
width: 250px;
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 5px;
position: relative;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view-third h1 {
width: 250px;
-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:hover h1 {
width: 250px;
-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 p {
width: 200px;
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
color: #fff;
text-align: center;
position: relative;
}
.view-third p {
width: 250px;
min-height: 100px;-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:hover p {
width: 250px;
min-height: 100px;-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;
Kan. Aku dah cakap code ni panjang gila khinzir.

Jangan ubah walau sikit pun code code ni. Ubah yang izzat Highlight kan tu je. Kalau nak ubah tu boleh tapi kalau blog korang hancur Gua tak bersalah.
Note: Width tu  make sure semua sama. Min height dia pulak korang ubah ikut size gambar yang korang guna. ok?
II. Korang paste code ni dekat mana mana yang korang nak
<center><div class="view view-third"> <img src="URL Image" />  <div class="mask">
<h1>Title</h1>
<p> Your Text Here<br>
Follow me on twitter - @IzzatAzhr</p></div></div></center>
Done. Preview dulu dan kalau jadi baru save. Kalau tak jadi boleh tanya. Goodluck!

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...