Mys2010 on Codepen

<style class="no repeat-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 }   
 </style>

<style class="top-styles">
body {
    background-image: url("http://Lin Gambar.jpg");
    background-repeat: repeat-x;
}
</style>

<style class="left-styles">
body {
    background-image: url("https://Link Gambar.jpg");
    background-repeat: repeat-y;
}
</style>

<style class="center-styles">
body {
    background-image:url(Link Gambar.jpg );
    background-repeat:initial;
}
</style>

<style class="warna-styles">
body {
    background-color:#000;
}
</style>

<style class="warna-styles">
/*Time for the CSS*/
* {margin: 0; padding: 0;}
body {background: #000;}
</style>

<style class="bk-center-styles">
body {background-image: url(http://Link Gambar.jpg)
;color:red;height:100%;overflow:hidden;}
</style>

<style class="Gambar-Warna-styles">
    body {
            background-image : url("https://Link Gambar.png");
            background-image : repeat;
            background-color : #000;
    }
</style>

.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://#.png)
no-repeat center center;}

<div class="kotak">
Your Text center
</div>  

<div class="kotak" style="overflow-x: scroll; 
overflow-y:hidden; padding: 10px; width: 548px;">
Your Text scroll left right
</div> 

<div class="kotak" style="overflow: auto; height: 80px;" >
Your Text scroll up and down
</div> 

<style type="text/css">
.Mys2010:hover:after, .Mys2010:hover:before {left: 70%;opacity: 1;}
.Mys2010:hover .info:after {-moz-transform: rotate(-200deg);-ms-transform: rotate(-200deg);-webkit-transform: rotate(-200deg);transform: rotate(-200deg);opacity: 1;right: -170%;display: block}
.Mys2010:hover .info:before {opacity: 1;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat;-moz-transition-property: "background, opacity";-o-transition-property: "background, opacity";-webkit-transition-property: "background, opacity";transition-property: "background, opacity";-moz-transition-duration: ".6s, .6s";-o-transition-duration: ".6s, .6s";-webkit-transition-duration: ".6s, .6s";transition-duration: ".6s, .6s"}
.info {background: -moz-linear-gradient(70deg, #888888, #aaaaaa);background: -webkit-linear-gradient(70deg, #888888, #aaaaaa);background: -ms-linear-gradient(70deg, #888888, #aaaaaa);background: -o-linear-gradient(70deg, #888888, #aaaaaa);background: linear-gradient(20deg, #888888, #aaaaaa);border-radius: 5px;position: relative;overflow: hidden;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.2);border-left: 1px solid rgba(255, 255, 255, 0.2);border-right: 1px solid rgba(255, 255, 255, 0.4);border-bottom: 1px solid rgba(255, 255, 255, 0.2);padding: 30px;font-family: sans-serif}
.info:before {opacity: 0;content: "";position: absolute;pointer-events: none;top: 0;left: 0;right: 0;bottom: 0;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat}
.info:after {opacity: 0;position: absolute;pointer-events: none;top: -200%;width: 400%;right: -105%;bottom: -100%;content: "";background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);-moz-background-size: 50% 100%;-o-background-size: 50% 100%;-webkit-background-size: 50% 100%;background-size: 50% 100%;background-repeat: no-repeat;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-moz-transition-property: all;-o-transition-property: all;-webkit-transition-property: all;transition-property: all;-moz-transition-duration: 0.6s;-o-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;transition-duration: 0.6s} 
</style> 

<div class="Mys2010">
<div class="info">
Your Text 
</div>
</div>

<img src="Link Gambar.jpg" alt="judul" width="100" height="100" />

<img src="Link Gambar.jpg"style="float:right;" alt="judul" width="100" height="100" />

<iframe border="0" src="http://Your Link" style="border: 0px; height: 350px; width: 800px;"></iframe>

<style class="box color-styles">
        * {
            padding : 0px;
            margin : 0px;
        }
        .kotak {
            width : 300px;
            height : 150px;
            color : #fff;
            background-color : blue;
            float : left;
        }
        
    </style>

<div class="kotak">
Your Text
</div>

 <style>
 body{
      background: #dad;
      background: -webkit-linear-gradient(45deg, #dad, green);
      background: -moz-linear-gradient(45deg, #dad, green);
      background: -o-linear-gradient(45deg, #dad, green);
      background: linear-gradient(45deg, #dad, pink);
      min-height: 100%;   
 }
 </style>

<style class="TopTitle-styles">/* Simple Reset */
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #dcecf4;
  border-bottom: 3px solid #63a5c4;
}
</style>  
<header>
<div class="page-wrap clearfix">
<center>
<h1>
<a href="http://css.com">Myscript2010</a></h1>
</center>
</header>
<section id="main">
<div class="page-wrap">

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/pelajaranku1/fileku/fixed.css">
 
<header>
<div class="page-wrap clearfix">
<center>
<h1>
<a href="http://css.com">Myscript2010</a></h1>
</center>
</header>
<section id="main">
<div class="page-wrap">

<p align="center">
<a class="Mys2010" href="http://Link Title" target="_blank" title="Judul"><span>Judul</span>

<a class="Mys2010" href="http://Link Title" target="_blank" title="Judul" style="margin-left: 300px"><span>judul 2</span></a>
</div>

 
*:before,
*:after {
  box-sizing: border-box;
}
.hide {
  display: none !important;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

/* GRADIEND */
.ap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  margin: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #333;
  background: #000;
  border-top: 2px solid #f0f;
  z-index: 9999;
} 
 
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<div style="background-image: url('http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNZmvBsD876qhyphenhyphenQC_U3OgCJyYxPQLJ1Ht761d9ExRZqSkJuxxJ6M4UCBAKsbzPkzWCX9j5vM1d7terN82Am_sWgOmnSX6gRaCdVx4itfa4X-0HGAvSGP7nGgCKu2nhyphenhyphenCqdsw0fa6Ssdw/s1600-r/sky_blue_gradient_background_mys2010.jpg" alt="img gradiend" width="700" height="170"'); background-repeat: no-repeat;
background-position: center;">
<p style="text-align: center;">

<b><font size="2" color="green"face="arial"> TEKS<b>
Diatas Gambar</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<figure>
    <div class="picture">
        <a href="http://Link Title" target="_blank" title="Judul">
            <img src="http://Link Gambar" alt=""/>
            <div class="image-overlay-link"></div>
        </a>
    </div>
</figure> 

 
/* GRADIEND */
.ap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  margin: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #333;
  background: #000;
  border-top: 2px solid #f0f;
  z-index: 9999;
} 

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<script type="text/javascript"><!--
function delayer(){
    window.location = "http://demoshow-mys2010.blogspot.co.id/2016/01/sahre-playing-with-math-in-js.html"}//-->
</script></head><body onLoad="setTimeout('delayer()', 35000)"><h2>
Waiting for a change in background</h2><p>
<img src="http://www.dynamicdrive.com/dynamicindex4/ajaxloadr.gif" name="e902" border="0" width="28" height="29" /></a>
<p style="text-align: center;">

/* HIDE */
body {#);
  font-size: 17px;color:green ;height:100%;overflow:hidden;text-shadow: 0  -0px 0 black, 0 0px 30px aqua, 0 0px 50px aqua;}
div {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}