Menu


Menu Tab

Pages

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

Myscript2010

Home Page
 
 

Copyright@2015

Copyright © Cibeber Cimahi