CSS Opacity and Tooltips, TutorialsPoint, CSS Opacity and Tooltips Tutorial

CSS Opacity

Opacity is now a part of the CSS3 specifications, but it was present for a long time. However, older browsers have different ways of controlling the opacity or transparency.

Image Transparent

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Transparent </title>
<style type="text/css">
  img {
     opacity: 0.3;
     filter: alpha(opacity=50);
    }
</style>
</head>

<body>

  <img src="images/background_images.jpg" alt="Image Transparent">

</body>
</html>

Output :

Image Hover Transparent

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Hover Transparent </title>
<style type="text/css">
img {
opacity: 0.3;
filter: alpha(opacity=50);
}
img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.img_1 {
opacity: 0.6;
filter: alpha(opacity=50);
}
.img_1:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>

<body>

<img src="images/background_images.jpg" alt="Image Hover Transparent">
<img class="img_1" src="images/background_images.jpg" alt="Image Hover Transparent">

</body>
</html>

Output :

CSS Tooltips

CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.

By using tooltips, you can display the position of the tooltip information in four ways:

1. Top of the element

2. Left side of the element

3. Right side of the element

3. Bottom of the element

CSS Tooltips Examples :

<!DOCTYPE html>
<html>
<head>
<title>CSS Tooltips</title>
</head>
<style type="text/css">
 
.tooltip_top{
   position:relative; 
   display:inline-block; 
   border-bottom:1px dotted black; 
   margin:30px auto 20px;
}
.tooltip_top .tooltiptext { 
     visibility:hidden; 
     width:120px; 
     background-color:black;
     color:#fff; t
     ext-align:center; 
     border-radius:2px; 
     padding:5px 0; 
     position:absolute; 
     z-index:1; 
     bottom:100%; 
     left:50%; 
     margin-left:-60px;
  }
.tooltip_top:hover .tooltiptext {visibility:visible;}
 
.tooltip_bottom { 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black;
 margin-bottom:20px;
}
.tooltip_bottom .tooltiptext {
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 2px; 
padding: 5px 0; 
position:absolute; 
z-index:1; 
top:100%; 
left:50%; 
margin-left:-60px; 
}
.tooltip_bottom:hover .tooltiptext { 
 visibility: visible; 
}
 
.tooltip_left { 
position: relative; 
display: inline-block;  
border-bottom: 1px dotted black;
margin-bottom:20px;
}
.tooltip_left .tooltiptext { 
visibility: hidden;  
width: 120px; b
ackground-color: black;  
color: #fff; 
text-align: center; 
border-radius: 2px; 
padding: 5px 0; 
position: absolute; 
z-index: 1;  
top: -5px; 
right: 105%;
}
.tooltip_left:hover .tooltiptext { 
visibility: visible; 
}
 
.tooltip_right{ 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
}
.tooltip_right .tooltiptext {
visibility: hidden; 
width: 120px; 
background-color: black; 
color:#fff; 
text-align:center; 
border-radius:2px;  
padding: 5px 0; 
position: absolute; 
z-index: 1; 
top: -5px; 
left: 105%;
}
.tooltip_right:hover .tooltiptext {  
visibility: visible; 
}
 
</style>

<body style="text-align:center;">
 
<div class="tooltip_top">TOP TOOLTIP
  <span class="tooltiptext">Top Tooltip</span>
</div> <br>
 
<div class="tooltip_bottom">BOTTOM TOOLTIP
  <span class="tooltiptext">Bottom Tooltip</span>
</div><br>
 
<div class="tooltip_left">LEFT TOOLTIP
  <span class="tooltiptext">Left Tooltip</span>
</div><br>
 
<div class="tooltip_right">RIGHT TOOLTIP
  <span class="tooltiptext">Right Tooltip</span>
</div>
 
</body>
</html>

Output :

CSS Tutorial