about the owner
Assalamualaikum and hye!
you can call me Ikin for short. A fulltime student in
University of Sciences Malaysia (USM) and a forever
twenty lady hehew.
+Facebook(Syikin Esa)
+Instagram(asyikinesa_)
+Twitter(@NurulAsyikinnnn)
Hover Image *macam saya // Sunday 31 March 2013
|
Holaa peeps ^^ Harini ikin nak buat satu tuto yang direquestkan oleh qila / GD Wifey *jeles i tau >,<
Dashboard > Template
search code </style>
copy code ni.
.ibox1 img {-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;}
.ibox1 .effect {background-color: #fff;border-radius:25px; -webkit-transform: translateX(-450px); -moz-transform: translateX(-450px); -o-transform: translateX(-450px); -ms-transform: translateX(-450px); transform: translateX(-450px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -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;}
.ibox1 h2 {background: #ffbbbb; color: #666;}
.ibox1 text {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; color: #333; -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;}
.ibox1:hover .effect {-webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);}
.ibox1:hover img {-webkit-transform: translateX(450px); -moz-transform: translateX(450px); -o-transform: translateX(450px); -ms-transform: translateX(450px); transform: translateX(450px);}
.ibox1:hover text {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.ibox {width: 232px; height: 200px; border: 1px dashed #ffbbbb; overflow: hidden; position: relative; text-align: center; background: #ffbbbb;}
.ibox .effect,.box .content {width: 232px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0;}
.ibox img {display: block; position: relative;}
.ibox h2 {text-transform: uppercase; color: #666; font-family: calibri; text-align: center; position: relative; font-size: 15px; padding: 5px; margin: 0px; margin-top: 10px; margin-bottom: 10px;}
.ibox text {font-family: calibri; font-style: normal; font-size: 11px; position: relative; color: #666; padding:5px; text-align: center;}
Paste kan atas </style>
Then, copy code ni.
<br><center><div class="ibox ibox1">
<center><img style="width: 235px; height: 200px;" src="URL IMAGE" /><center>
<br />
<div class="effect">
<h2>
IKIN'S OFFICIAL BLOG</h2>
<text> TULIS APA APA DALAM NI OKAY :)</text></div> </div>
Paste kan dekat sidebar korang. faham kan?
Preview & Save!
p/s : kalau takjadi ke takfaham ke, tanye ikin kayy . kbye!^^
Labels: tutorials |