personal site

paste dekat mana yang korang nak

<style>
.box1 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;}
.box1 .effect {background-color: #848484; -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;}
.box1 h2 {background: #eee; color: #000;}
.box1 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;}
.box1:hover .effect {-webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);}
.box1:hover img {-webkit-transform: translateX(450px); -moz-transform: translateX(450px); -o-transform: translateX(450px); -ms-transform: translateX(450px); transform: translateX(450px);}
.box1:hover text {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box {width: 300px; height: 200px; margin: 10px; float: center; border: 1px solid #fff; overflow: hidden; position: relative; text-align: center; background: #fff;}
.box .effect,.box .content {width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0;}
.box img {display: block; position: relative;}
.box h2 {text-transform: uppercase; color: #fff; font-family: calibri; text-align: center; position: relative; font-size: 15px; padding: 7px; margin: 0px; margin-top: 10px; margin-bottom: 10px;}
.box text {font-family: calibri; font-style: normal; font-size: 11px; position: relative; color: #fff; padding: 10px; text-align: center;}

</style>

<br />
<div class="box box1">
<img src="http://data.whicdn.com/images/44095840/82261130665225582_8SM5HpJp_c_large.jpg" />
        <br />
<div class="effect">
<h2>
TITLE</h2>
<text>Occae et harumb bet theap. Est praesent luptatum. Ha! Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct. Et harumd dereud facilis est er expedit distinct. Yoii rockem sockem mow-em yown. Manarie li que vaqeriao. Occae et harumb bet theap. Est praesent luptatum. Dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae.</text><br />
<br />
</div>
</div>
</div>

ini codenya boleh paste dekat mana2 yang korang nak

<style>
.box1 img {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -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;}
.box1 .effect {background-color: #848484; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1 h2 {background: #848484; margin: 20px 40px 0px 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1 text {color: #333; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}
.box1 a.info {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;}
.box1:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}
.box1:hover .effect {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box1:hover h2,.box1:hover text,.box1:hover a.info {-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
.box2 {width: 300px; height: 200px; margin: 10px; float: center; border: 1px solid #fff; overflow: hidden; position: relative; text-align: center; background: #fff;}
.box2 .effect,.box .content {width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0;}
.box2 img {display: block; position: relative;}
.box2 h2 {text-transform: uppercase; color: #fff; font-family: calibri; text-align: center; position: relative; font-size: 15px; padding: 5px; margin: 10px; background-color: #eee; margin: 0px; margin-top: 10px; margin-bottom: 10px;}
.box2 text {font-family: calibri; font-style: normal; font-size: 11px; position: relative; color: #fff; padding: 10px; text-align: center; margin: 2px;}

</style>
<br />
<div class="box2 box1">
<img src="URL IMG" />
        <br />
<div class="effect">
<h2>
TITLE</h2>
<text>YOUR TEXT</text><br />
<br />
</div>
</div>
</div>

ini codenya, boleh paste dekat mana yang korang nak

<style>
.menu {background: #000; min-height: 40px; max-height: 40px; width: 20px; float: right; -webkit-transition-duration: .99s; overflow:hidden; z-index: 1;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;}
.menu:hover {width: 250px;}
menu2 {background: #fff; padding: 4px; margin-left: 3px; color: #000;}
menu2:hover{-webkit-border-radius: 10px;border-radius: 10px;}
menu3 {font-size: 30px; color:#fff; font-family: georgia;}

</style>
<br />
<div class="menu">
<menu3>&#8592;</menu3>
<a href="LINK"><menu2>home</menu2></a>
<a href="LINK"><menu2>about</menu2></a>
<a href="LINK"><menu2>stuff</menu2></a>
<a href="LINK"><menu2>link</menu2></a>
<a href="LINK"><menu2>site</menu2></a>
</div>

home about stuff credit

paste dekat mana yang korang nak

<style>
.menu1 {width: 100%; min-height: 40px; background: #eee; text-align: center; word-spacing: 20px; }
menu2 {font-family: verdana; font-size: 30px; color: #fff;margin-top: 2px;  border-top-left-radius: 50px 20px; border-bottom-right-radius: 50px 20px; -webkit-transition-duration: 1.00s; }
menu2:hover {background: #848484;  padding: 0px; color: #fff; opacity: 0.4; }
</style>
<div class="menu">
<a href="LINK"><menu2>home</menu2></a>
<a href="LINK"><menu2>about</menu2></a>
<a href="LINK"><menu2>stuff</menu2></a>
<a href="LINK"><menu2>credit</menu2></a>
</div>