showing tool tip with css

a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
 list-style: none;
 }
a  span {
 display: none;
 }
 a {
 display: block;
 position: relative;
 width: 55px;
 height: 55px;
 border: 4px solid transparent;
-webkit-transition: all 0.25s ease-in-out;
 -moz-transition: all 0.25s ease-in-out;
 -o-transition: all 0.25s ease-in-out;
 -ms-transition: all 0.25s ease-in-out;
 transition: all 0.25s ease-in-out;
font: bold 12px/25px Arial, sans-serif;
 color: #515151;
 text-decoration: none;
 text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
 }
 img {
 -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
 -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
 box-shadow: 1px 1px 5px rgba(0,0,0,.5);
 }
 a:hover
 {
 border: 4px solid red;
 display:block;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
 -moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
 box-shadow: 0px 1px 0px rgba(255,255,255,.05);
 }
a:hover span {
 position: absolute;
 z-index: 101;
 bottom: -30px;
 left: -22px;
 display: block;
 width: 100px;
 height: 25px;
 text-align: center;
-webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
 -moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
 box-shadow: 0px 1px 0px rgba(0,0,0,.4);
-webkit-transition: all 0.25s ease-in-out;
 -moz-transition: all 0.25s ease-in-out;
 -o-transition: all 0.25s ease-in-out;
 -ms-transition: all 0.25s ease-in-out;
 transition: all 0.25s ease-in-out;
background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
 background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
 }
a:hover span:before {
 width: 0;
 height: 0;
 border-bottom: 5px solid #ffffff;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 content: '';
 position: absolute;
 top: -5px;
 left: 44px;
 }

html

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="tip.css" />
 </head>
 <body>
 <a href="#slide-1"><img src="img/thumb1.png" alt="" /><span style="">Image 1</span></a>
</body>
 </html>

Ref: http://designmodo.com/slider-css3/

Advertisements

About rahul23134654

Hi, I am Rahul Meha , B.E. in (I.T.)
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s