CSS hover Box

jdunhin

New member
Joined
Feb 27, 2013
Messages
93
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
1,318
Replies
8
Views
2,853
Replies
1
Views
1,691
Replies
1
Views
1,659
Replies
1
Views
1,574
Newer threads
Replies
0
Views
1,863
Replies
6
Views
3,587
Replies
6
Views
2,862
Replies
4
Views
2,550
Replies
3
Views
2,084
Latest threads
Replies
3
Views
58
Replies
1
Views
112

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

Popular tags

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