Multiple Hover Effect

Multiple Hover Effect
Memasang Multiple Hover Effect dan menyisipkan link
pada effect sub hover kode ini menampilkan effek Hover yang berbeda bila disentuh dengan cursor, serta dapat disipkan link untuk menuju kesatu postingan, dibawah ini adalah kode tersebut dan cara penerapannya :

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
@import "compass/css3";
body {
    background: #292929;
    padding-left: 30px;
}
.row {
    float: left;
    width: 100%;
}
.row .block {
    float: left;
    width: 25%;
    height: 150px;
}
.hovicon {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}
.hovicon.small {
    font-size: 20px;
    line-height:45px;
    width:45px;
    height:45px;
    margin:7px;
}
.hovicon.mini {
    font-size: 15px;
    line-height:32px;
    width:30px;
    height:30px;
    margin:7px;
}
.hovicon.auto-width {
    width: auto;
    height: auto;
    padding: 15px;
}
.hovicon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.hovicon:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}
/* Effect 1 */
 .hovicon.effect-1 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-1:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}
/* Effect 1a */
 .hovicon.effect-1.sub-a:hover {
    background: rgba(255, 255, 255, 1);
    color: #41ab6b;
}
.hovicon.effect-1.sub-a:hover i {
    color: #41ab6b;
}
.hovicon.effect-1.sub-a:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 1b */
 .hovicon.effect-1.sub-b:hover {
    background: rgba(255, 255, 255, 1);
    color: #41ab6b;
}
.hovicon.effect-1.sub-b:hover i {
    color: #41ab6b;
}
.hovicon.effect-1.sub-b:after {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.hovicon.effect-1.sub-b:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 2 */
 .hovicon.effect-2 {
    color: #eea303;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.hovicon.effect-2:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
/* Effect 2a */
 .hovicon.effect-2.sub-a:hover, .hovicon.effect-2.sub-a:hover i {
    color: #eea303;
}
.hovicon.effect-2.sub-a:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}
/* Effect 2b */
 .hovicon.effect-2.sub-b:hover:after {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    -moz-transition: -moz-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}
.hovicon.effect-2.sub-b:hover, .hovicon.effect-2.sub-b:hover i {
    color: #fff;
}
/* Effect 3 */
 .hovicon.effect-3 {
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.hovicon.effect-3:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
    -moz-transition: -moz-transform 0.2s, opacity 0.3s;
    transition: transform 0.2s, opacity 0.3s;
}
/* Effect 3a */
 .hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #f06060;
}
.hovicon.effect-3.sub-a:hover, .hovicon.effect-3.sub-a:hover i {
    color: #fff;
}
.hovicon.effect-3.sub-a:hover:after {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
/* Effect 3b */
 .hovicon.effect-3.sub-b, .hovicon.effect-3.sub-b i {
    color: #fff;
}
.hovicon.effect-3.sub-b:hover, .hovicon.effect-3.sub-b:hover i {
    color: #f06060;
}
.hovicon.effect-3.sub-b:after {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
}
.hovicon.effect-3.sub-b:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 4 */
 .hovicon.effect-4 {
    width: 92px;
    height: 92px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}
.hovicon.effect-4.small {
    width:45px;
    height:45px;
}
.hovicon.effect-4.mini {
    width:30px;
    height:30px;
}
.hovicon.effect-4.sub-a {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.hovicon.effect-4:before {
    line-height: 92px;
}
.hovicon.effect-4:after {
    top: -4px;
    left: -4px;
    padding: 0;
    z-index: 10;
    border: 4px dashed #fff;
}
.hovicon.effect-4:hover {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    color: #fff;
}
.hovicon.effect-4:hover i {
    color: #fff;
}
/* Effect 4b */
 .hovicon.effect-4.sub-b:hover {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.hovicon.effect-4.sub-b:hover:after {
    -webkit-animation: spinAround 9s linear infinite;
    -moz-animation: spinAround 9s linear infinite;
    animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}
/* Effect 5 */
 .hovicon.effect-5 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.hovicon.effect-5:after {
    display: none;
}
.hovicon.effect-5:hover {
    background: rgba(255, 255, 255, 1);
    color: #702fa8;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
}
.hovicon.effect-5:hover i {
    color: #702fa8;
}
.hovicon.effect-5.sub-a:hover:before {
    -webkit-animation: toRightFromLeft 0.3s forwards;
    -moz-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards;
}
@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
.hovicon.effect-5.sub-b:hover:before {
    -webkit-animation: toLeftFromRight 0.3s forwards;
    -moz-animation: toLeftFromRight 0.3s forwards;
    animation: toLeftFromRight 0.3s forwards;
}
@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toLeftFromRight {
    49% {
        -moz-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toLeftFromRight {
    49% {
        transform: translate(-100%);
    }
    50% {
        opacity: 0;
        transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
.hovicon.effect-5.sub-c:hover:before {
    -webkit-animation: toTopFromBottom 0.3s forwards;
    -moz-animation: toTopFromBottom 0.3s forwards;
    animation: toTopFromBottom 0.3s forwards;
}
@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toTopFromBottom {
    49% {
        -moz-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toTopFromBottom {
    49% {
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
.hovicon.effect-5.sub-d:hover:before {
    -webkit-animation: toBottomFromTop 0.3s forwards;
    -moz-animation: toBottomFromTop 0.3s forwards;
    animation: toBottomFromTop 0.3s forwards;
}
@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toBottomFromTop {
    49% {
        -moz-transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toBottomFromTop {
    49% {
        transform: translateY(100%);
    }
    50% {
        opacity: 0;
        transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
/* Effect 6 */
 .hovicon.effect-6 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-6:hover {
    background: rgba(255, 255, 255, 1);
    color: #64bb5d;
}
.hovicon.effect-6:hover i {
    color: #64bb5d;
}
.hovicon.effect-6:hover:before {
    -webkit-animation: spinAround 2s linear infinite;
    -moz-animation: spinAround 2s linear infinite;
    animation: spinAround 2s linear infinite;
}
/* Effect 7 */
 .hovicon.effect-7 {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-7:hover, .hovicon.effect-7:hover i {
    color: #fff;
}
.hovicon.effect-7:after {
    top: -8px;
    left: -8px;
    padding: 8px;
    z-index: -1;
    opacity: 0;
}
/* Effect 7a */
 .hovicon.effect-7.sub-a:after {
    box-shadow: 0 0 0 rgba(255, 255, 255, 1);
    -webkit-transition: opacity 0.2s, box-shadow 0.2s;
    -moz-transition: opacity 0.2s, box-shadow 0.2s;
    transition: opacity 0.2s, box-shadow 0.2s;
}
.hovicon.effect-7.sub-a:hover:after {
    opacity: 1;
    box-shadow: 3px 3px 0 rgba(255, 255, 255, 1);
}
.hovicon.effect-7.sub-a:before {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.hovicon.effect-7.sub-a:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 7b */
 .hovicon.effect-7.sub-b:after {
    box-shadow: 3px 3px rgba(255, 255, 255, 1);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}
.hovicon.effect-7.sub-b:hover:after {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.hovicon.effect-7.sub-b:before {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.7;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
.hovicon.effect-7.sub-b:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
/* Effect 8 */
 .hovicon.effect-8 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
}
.hovicon.effect-8:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}
.hovicon.effect-8:hover {
    background: rgba(255, 255, 255, 0.05);
    -webkit-transform: scale(0.93);
    -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
    color: #fff;
}
.hovicon.effect-8:hover i {
    color: #fff;
}
.hovicon.effect-8:hover:after {
    -webkit-animation: sonarEffect 1.3s ease-out 75ms;
    -moz-animation: sonarEffect 1.3s ease-out 75ms;
    animation: sonarEffect 1.3s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
/* Effect 9 */
 .hovicon.effect-9 {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.hovicon.effect-9:after {
    top: 0;
    left: 0;
    padding: 0;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
/* Effect 9a */
 .hovicon.effect-9.sub-a:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.5;
}
.hovicon.effect-9.sub-a:hover {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 1);
    color: #fff;
}
.hovicon.effect-9.sub-a:hover i {
    color: #fff;
}
/* Effect 9b */
 .hovicon.effect-9.sub-b:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}
.hovicon.effect-9.sub-b:hover {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
    color: #fff;
}
.hovicon.effect-9.sub-b:hover i {
    color: #fff;
}  
    </style>

<div class="row">
<div class="block">
<i class="hovicon effect-1 sub-a">1</i>
</div>
<div class="block">
<i class="hovicon effect-2 sub-b">2</i>
</div>
<div class="block">
<i class="hovicon effect-3 sub-a">3</i>
</div>
<div class="block">
<i class="hovicon effect-4 sub-b">4</i>
</div>
<div class="row">
<div class="block">
<i class="hovicon effect-5 sub-a">9</i>
</div>
<div class="block">
<i class="hovicon effect-6">IO</i>
</div>
<div class="block">
<i class="hovicon effect-7 sub-a">11</i>
</div>
<div class="block">
<i class="hovicon effect-7 sub-b">I2</i>
</div>
</div>
<div class="row">
<div class="block">
<i class="hovicon effect-8">I3</i>
</div>
<div class="block">
<i class="hovicon effect-9 sub-a">I4</i>
</div>
<div class="block">
<i class="hovicon effect-9 sub-b">I5</i>
</div>
<div class="block">
<i class="hovicon effect-1 sub-a"><b class="icon-camera-retro"></b>
</i>
</div>
</div>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" />

Penjelasan :
Sisipkan link diantara kode <i class="hovicon effect-1 sub-a">1</i>
Contoh: <i class="hovicon effect-1 sub-a"><a href="http://Your Link"> Your Text </a> </i>

Sumber : Codepen
Edited by. Myscript2010

DEMOSHOW

css3 tooltip hover

Memasang kode css3 tooltip hover,
kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini  akan menampilkan title ketika disentuh oleh cursor yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
.tooltip {
position: relative; opacity: 0; color: #dad;
top: -100px; left: 0px;
width: 180px; padding: 10px;
border-radius: 25px; -webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);
-webkit-transition: .5s; transition: .5s;
-webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.container .tooltip:after {
position: absolute; top: 100%; left: 45%; height: 0; width: 0;
border: 0px solid transparent; border-top: 0px solid rgba(0, 0, 30, 0.5);
content: "Myscript2010"; white-space: nowrap; color:#DDD;
}
.container:hover .tooltip {
opacity: 1; top: -225px;
-webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
    </style>
<a href="http://Your Link" title="Mymenu">
<div class="container">
<img src="http://Link Gambar" />
<div class="tooltip">
<center>
<p class="tooltiptxt">
Your Text</p>
</div></div>

Penjelasan :
Ganti Link dan edit kode yang di warnai 

Sumber by. Codepen
Edited by. Myscript2010

Contoh Tampilan Tooltip Hover

Your Text

Card Flip

Memasang kode Card Flip, kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini  akan berputar ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
body {
  font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 12px 0;
}
.card-container {
  cursor: pointer;
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 300;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 400;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.card .back {
  background: #000;
  color: #0087cc;
  line-height: 150px;
  text-align: center;
  transform: rotateY(180deg);
}
</style>
 <div class="card-container">
  <div class="card">
    <div class="side">
<img src="http://Link Gambar.gif" alt="Myscript2010">
</div>
    <div class="side back">
<a href="http://Your Link"><b>Your Text</b></div>
  </div>
</div>

Penjelasan :
Ganti Link dan edit kode yang di warnai 

Sumber by. Codepen
Edited by. Myscript2010

TESTSCRIPT

Expanding Codeblock

Expanding Codeblock
Memasang Expanding Codeblock, kode ini Fungsinya dapat menampilkan Teks, hampir sama dengan kode textarea, perbedaanya kode ini menggunakan efek hover, selain itu kode ini dapat dimodif menjadi textarea dengan cara menyisipkan kode textarea dibawah kode <div class="inner"> dan di tutup dengan   kode </div> penerapannya dapat diletakan di area gadged atau di entri halaman baru. dibawah ini adalah kode tersebut.

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
.container {
position:relative;
}
.container:after {
text-align: center; position: absolute; background:#999;
top: 17px; right: -28px; width: 120px; height: 1.6em;
font-size: 1.1em; content: "Mys2010";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.outer{
color: #000; background: #DDD; overflow: hidden;
}
.outer:hover {
color: #FFF; background: #666; overflow: hidden;
}
.inner {
max-height: 110px; overflow: auto;
-webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;
}
.outer:hover > .inner {
max-height: 1200px;
-webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;
}</style>
   

<div class="container outer">
<div class="inner">
 isi Teks disini
</div>
</div>

Contoh
Expanding Codeblock Sebelum dimodif

Contoh Expanding Codeblock Setelah dimodif

<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Mari Belajar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBgYBv5m-aS4Uq74AGnGb_Kjl0RmTIhUOWPjhxK3zGgarn7C0NXWfQ805X04pRRfmt6jXAFsM7jE2FkNmwR41754yNfBDMFgK8dLCXTqerbl36gfKgVqFEMCNWobVzv6WISHTTm3xi5Y/s1600-r/backlink_mys2010.gif" alt="Mari Belajar" /></a><br />

Penjelasan :
Edit kode yang di warnai sesuai keinginan

All Sources
Edited by. Myscript2010

CSS3 Advanced slider

CSS3 Advanced slider
Memasang Kode CSS3 Advanced slider, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG. gambar yang ada pada kode ini  akan berubah menjadi slide melayang ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
.container {
position:relative; width:200px; height:150px;
}
.container img {
position:absolute; top:0; left:0; opacity:0;
}
.container:hover img {
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 10s; animation-iteration-count: infinite;
}
@-webkit-keyframes slider {
0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
@keyframes slider {
0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
.container img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.container img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.container img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.container img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.container img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}

.container .hovertext {
position: absolute; top:60px; left:30px;
font-size:1.5em; color: rgba(255,255,255,1);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.container:hover .hovertext {
top:20px; color: rgba(255,255,255,0);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
</style>

<div class="container"> 
<a href="http://Your Link/">
<img alt="img5" src="http://Link Gambar" />
<img alt="img4" src="http://Link Gambar" />
<img alt="img3" src="http://Link Gambar" />
<img alt="img2" src="http://Link Gambar" />
<img alt="img1" src="http://Link Gambar" />
<div class="hovertext">
Hover here</div>
</div>

Penjelasan :
Ganti Link yang di warnai dengan link sobat

Sumber by. Jhon Star
Edited by. Myscript2010

TESTSCRIPT

CSS3 Basic Image Slider

CSS3 Basic Image Slider
Memasang Kode CSS3 Basic Image Slider, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG. gambar yang ada pada kode ini  akan berubah menjadi slide ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
.container {
position:relative; width:200px; height:150px;
}
.container img {
position:absolute; top:0; left:0;
}
.container:hover img {
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: slider;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}
}
@keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}
}
.container img:nth-child(1) {-webkit-animation-delay: 8s; animation-delay: 8s;}
.container img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;}
.container img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;}
.container img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.container img:nth-child(5) {-webkit-animation-delay: 0s; animation-delay: 0s;}

</style>
<div class="container">
<a  href="http://Your Link/">
<img src="http://Link Gambar.jpg" alt="img5">
<img src="http://Link Gambar.jpg" alt="img4">
<img src="http://Link Gambar.jpg" alt="img3">
<img src="http://Link Gambar.jpg" alt="img2">
<img src="http://Link Gambar.jpg" alt="img1">
</div>

Penjelasan :
Ganti Link yang di warnai dengan link sobat

All Sources
Edited by. Myscript2010

TESTSCRIPT

Slide Effect Text Overlay

Slide Effect  Text Overlay
Memasang Kode Slide Effect  Text Overlay, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG serta Teks sebagai judul yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:350px;
height:250px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(30.144.255);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>
<div class="container">
<img src="http://Link Gambar" alt="img5">
<div class="textbox">
<p class="text">
<a href="Your Link" target="_blank">Your Text</p></a>

</div>
</div>

Penjelasan :
Terapkan Link dan edit kode yang di warnai

All Sources
Edited by. Myscript2010

TESTSCRIPT

Circle Hover Effects

Circle Hover Effects
Memasang Kode Circle Hover Effects
kode ini cukup menarik untuk menghiasi blog, selain itu kode ini juga dapat diterapkan link yang menuju kestu postingan, kode ini menggunakan link gambar dengan format JPG, PNG dan GIF, dibawah ini kode tersebut serta cara penerapannya.

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
.my2010-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}
.my2010-info-wrap,
.my2010-info{
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;
}
.my2010-info-wrap {
 top: 20px;
 left: 20px;
 background:url(http://Link Gambar.jpg) no-repeat center center;
 box-shadow: 0 0 0 20px rgba(255,255,255,0.2),inset 0 0 3px rgba(115,114, 23, 0.8);}
.my2010-info {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
.my2010-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}
.my2010-info .my2010-info-front {
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
  z-index: 100;
 box-shadow:
  inset 2px 1px 4px rgba(0,0,0,0.1);
}
.my2010-info .my2010-info-back {
 background: rgba(230,132,107,0);
}
.my2010-img-1 {
 background-image: url(http://Link Gambar.jpg);
}
.my2010-img-2 {
 background-image: url(http://Link Gambar.jpg);
}
.my2010-img-3 {
 background-image: url(http://Link Gambar.jpg);
}
.my2010-info h3 {
 color: lime;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 14px;
 margin: 0 25px;
 padding: 40px 0 0 0;
 height: 90px;
 font-family: Helvetia;
 text-shadow: 2px 2px 2px red,0 1px 2px #080;}
.my2010-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: -2.5em 20px;
 font-size: 12px;}
.my2010-item:hover .my2010-info-front {
 -webkit-transform: rotate3d(1,0,0,-180deg);
 -moz-transform: rotate3d(1,0,0,-180deg);
 -o-transform: rotate3d(1,0,0,-180deg);
 -ms-transform: rotate3d(1,0,0,-180deg);
 transform: rotate3d(1,0,0,-180deg);
 box-shadow:
  inset 0 0 5px rgba(255,255,255,0.2),
  inset 0 0 3px rgba(0,0,0,0.3);
}
.my2010-grid {
 margin: 15px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.my2010-grid:after,
.my2010-item:before {
 content: '';
    display: table;
}
.my2010-grid:after {
 clear: both;
}
.my2010-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin:15px;
}
</style>

<ul class="my2010-grid">
<li>
<div class="my2010-item my2010-img-1">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-1">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
<li>
<div class="my2010-item my2010-img-2">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-2">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
<li>
<div class="my2010-item my2010-img-3">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-3">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
</ul>
<div align="center">
<span style="color: tan; font-family: &quot;bernard mt condensed&quot;; font-size: small;">Your Text<span style="color: cyan; font-family: &quot;vivaldi&quot;; font-size: large;">
<a href="http://Your Link.blogspot.co.id/" title="Your Text">
<b>Your Text</b></a></span></span></div>

Penjelasan :
Edit kode yang diberi warna sesuai keinginan
Tambahkan background gambar pada kode CSS tepat dibawah kode 
<style type="text/css">  jika diperlukan

body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Sumber by. Tympanus
Edited by. Myscript2010

DEMOSHOW

CSS3 Hover With Web Symbols

CSS3 Hover With Web Symbols
Memasang Kode CSS3 Hover With Web Symbols, kode ini memiliki efek berputar bila disentuh oleh Cursor dan juga dapat menampilkan beberapa judul artikel, tampilan kode ini tidak menggunakan background gambar. kecuali warna latar sebagai background. dibawah ini adalah kode tersebut serta cara penerapannya :

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('images/websymbols/websymbols-regular-webfont.eot');
    src: url('images/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('images/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('images/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('images/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
    font-family: 'Dosis', sans-serif;
}
.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #333;
    overflow: hidden;
    position: relative;
    float:left;
    background: #777;
    margin-right: 4px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #808080;
    position: relative;
   -moz-box-shadow:0px 0px 3px #000000;
   -webkit-box-shadow:0px 0px 3px #000000;
   box-shadow:0px 0px 3px #000000;

}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #E6E6FA ;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
}
.ca-sub{
    text-align:center;
    color: #dad ;
    font-size: 26px;
    position: absolute;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    top: 110px;
    opacity: 0;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:hover{
    background: #444;
    border-color: #ff0000;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 45px 60px -50px #000000;
}
.ca-menu li:hover .ca-icon{
    color: #B20000 ;
    font-size: 60px;
}
.ca-menu li:hover .ca-main{
    display: none;
}
.ca-menu li:hover .ca-sub{
    opacity: 0.8;
}
</style>

<ul class="ca-menu">
<li>
<a href="https:// Your Link">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 1</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>                 
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 2</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>                 
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 3</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>                  
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 4</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>
</li>
</ul>
</div>

Penjelasan :
Edit kode yang diberi warna sesuai keinginan
Tambahkan background gambar pada kode CSS tepat dibawah kode 
<style type="text/css">  jika diperlukan

body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Edited by. Myscript2010
Sumber by. 1stwebdesigner

DEMOSHOW

Diamond Grids with CSS3

Diamond Grids with CSS3
Memasang Kode Grids Diamond, kode ini fungsinya sama dengan sitemap dapat menampilkan beberapa judul artikel, dengan background yang dapat diedit baik menggunakan kode warna maupun background gambar. dibawah ini adalah kode tersebut serta cara penerapannya :

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
body {
    background: #888;
}
h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    text-align: left;
    color: #fff; 
    font-size: 38px;
    width: 700px;
    padding-bottom: 0px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
/* DIAMOND GRIDS STYLES
-------------------------------------------------*/
.diamond-grid {
    width: 1000px;
    margin: 0 auto;
    padding-right:  0px;
}
ul li {
    list-style: none;
    float: left;
    margin-left: 66px;
    margin-top: 20px;
}
.diamond {
    height: 150px;
    width: 150px;
    background: transparent;
    color: #fff;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: color .35s linear;
    -moz-transition: color .35s linear;
    -o-transition: color .35s linear;
    transition: color .35s linear;
}
.diamond:hover {
    background: #444;
    color: #3cddb9;
}
.diamond-grid > li:nth-child(9n+6) {
    margin-left: 66px;
    margin-top: -6px;
}
.diamond-grid > li:nth-child(5) {
    margin-left: 182px;
}
.diamond-grid > li:nth-child(n+5) {
    margin-top: -51px;
}
.text {
    width:  110px;
    height:  110px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align: center;
}
</style>

<h1>
Diamond Grids with CSS3</h1>
 <ul class="diamond-grid">
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">
Judul Artikel
</div>
</a>
</li>
</ul>
 

Tambahkan background gambar pada kode CSS tepat diatas h1 jika diperlukan
body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Penjelasan :
Edit kode yang diberi warna sesuai keinginan

Edited by. Myscript2010
Sumber by. 1stwebdesigner
DEMOSHOW