Berbagi Ilmu Bersama

.h{
text-shadow: 2px 3px 3px black;
font-size:20px;
font-family:"calibri";
color:#b7babb;
}
.m{
box-shadow: 2px 3px 3px black;

}
.g{
border-radius:20px;
}
.j{
box-shadow: 2px 2px 3px black;
}
.l{
font-size: 50px;
color: #716866;
text-shadow: 0 1px 0 #777, 0 -1px 0 #000;
}
.z{
background-color:#6a7375;
opacity:0.66;
}
ul.g li{
float:Left;
margin: 0 10 px;
padding: 10px;
border: 0px solid #ddd;
list-style: none;
width:10px;
}
ul.g li a img{
float: left;
width: 200px;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
ul.g li a:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1.5);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.b img {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.c img {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.d img {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.e img {
-webkit-transform: rotate(-50deg)skew(-30deg);
-moz-transform: rotate(-50deg)skew(30deg);
transform: rotate(-50deg)(30deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.f img {
-webkit-transform: skew(-60deg);
-moz-transform: skew(-60deg);
transform: (-60deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.h img {
-webkit-transform: scale(1)translate(20px,40px);
-moz-transform: scale(1)translate(20px,40px);
transform: scale(1)translate(20px,40px);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.j img {
-webkit-transform: scale(1)translate(-20px);
-moz-transform: scale(1)translate(-20px);
transform: scale(1.5)translate(-20px);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.k img {
-webkit-transform: scale(1)translate(60px);
-moz-transform: scale(1)translate(60px);
transform: scale(1.5)translate(60px)
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}