<!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>
<!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>
<!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>