Menu


Menu Tab

Pages

Showing posts with label css3 tooltip hover. Show all posts
Showing posts with label css3 tooltip hover. Show all posts

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

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi