HOSTING MURAH 2014

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}
.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}
.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>
<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0LZuDqMiVj9Tty0TiWHiBziQ22mnt7RygfoJt4VSltJyOHH_ayxH4rN3oTjOiN6SU6SNBmUbC9ulfuOOZAq4xk4Tq32Dq3urF8oCSpo0MlvIg103E4ZB_IVd9Y8htfusCByNBmtd_BQ/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>

 <div style="clear:both;"></div>
</div>

• Ganti Post Link Dengan Link Anda

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#btrix_slider3').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#btrix_slider3 {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>
<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PH8KzJeBLXXTiTpByZwBD8X_8MlIbeUF-iXOY5TDTZSsuC1TQqSlVgRZcIx6jX25Vl5GP-8Lt0pIslWulfq0W4eSOK_opUmlSw9OofV6qNvC3QPrq-oXlgZI9AmW2tLWQXy4beHfGMs/s1600/btrix_image1.jpg" />
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJoZhi84hMWt-GBaGSQhTjH4n67xYRV78ar_aoXO1x1_nZ5TQFEZhNEtfvVv_QHrx-WtMNutx2Y3Avd_1AUmBQ7hy1Bgx71vZ686whgglizTjTsFQJOqlf64ScIuJR3yDFIYHKlYyz_c/s1600/btrix_image2.jpg" />
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM5MuhwJYPizjsS_UHet7WYrHI9IxAdDsaOGeRLlfBGI0CYbQOQULVxSbR6DYLwLkETJ04EBdWyfa16DcuiUMmzEMPe-uuLBNBhJfa8A78O4bppGAgItKHdBor3S_Hj-gP3GlrL09F0Oc/s1600/btrix_image3.jpg" />
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-h0jWvMacyh6LLLdWCMDDFXTos25kUeO4V6cJWXdS7YJmjiy19S6v8WHDg4ceVeFDcEbUNrNoag8efof0SlMSHVAR6tzDFtOk5um9DMZenitSqN80UiQYtvhgLyphYlwXoPzL2WmbWtA/s1600/btrix_image4.jpg" />
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFXGF9P572-gfU0YdBHEv5VlzCCDxOY1vROHmC_rnQ83kGK40SMuEHIguFBuY2GyaDb9dv_ATkxZPk5dXw8hU1MWOrRaOFnd6IxFSaxjFmeQOHlIajHNgeKYCCE_lFMC2pjpx-K92EWE/s1600/btrix_image5.jpg" />
<span class="bottom"><h3>
HEADING-5 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />