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>

Post a Comment