CSS hover Box

jdunhin

Active member
Registered
Joined
Feb 27, 2013
Messages
72
Points
0
Hi

Popupbox over a link. This is very cool and you can get creative! Sorry it feels like I am spamming the forum but I decided to share my notes on this forum...

Code:

css:
/*************tooltip***************************/
.tooltip {
cursor: hand;
text-decoration: none !important;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
color: #000000;
}
.tooltip:hover span {
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); //browser
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); //browser
font-family: arial,Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover em {
font-family: arial, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}

.info {
background: #FFFFFF;
border: 1px solid #000000;
}

html a:hover {
background: transparent;
}

html:
<div id='ID'><a class="tooltip" href="http://LINK"><span class="CUSTOMINFO"><em>HEADING</em>INFO</span></a> </div>
 
Older Threads
Replies
0
Views
2,088
Replies
8
Views
3,770
Replies
1
Views
3,046
Replies
1
Views
2,464
Newer Threads
Replies
0
Views
2,681
Replies
3
Views
3,192
Replies
1
Views
2,363
Latest Threads
Recommended Threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top