Transparent Image Overlay
The following CSS code shows how to transparent color overlay on images. Also you can see how to overlay one div over another div.
Move mouse over the image…
Overlay a transparent div on an image
Source Code
<html >
<head>
<style type="text/css">
.trPic{
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.trPic .redO{
position:relative;
top:0px;
width:320px;
height:240px;
background:#FF2400;
opacity:0;
}
.trPic:hover .redO
{
opacity:0.7;
}
</style>
</head>
<body>
<div class="trPic">
<div class="redO">
</div>
</div>
</body>
</html>Transparent Background Images
In CSS, there is no property such as transperancy. The CSS3 property for transparency is opacity and it is a part of the W3C CSS3 recommendation.
More about …. How to Transparent Background Images
Add color overlay to images
The following css code shows how to make color overlay on image hover. When you add color, its look like a Transparent Background for the Image because overlay opacity is changed
CSS image hover color overlay
Move mouse over the image…
Overlaying color over an image
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.picColor{
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.picColor:hover
{
opacity:0.9;
background:#FFFFFF;
width:320px;
height:240px;
}
</style>
</head>
<body>
<div class="picColor">
</div>
</body>
</html>Add multiple color overlay to images
You can add multiple color overlay on images while image hover.
Move mouse over the image…….
Transparent Background Images
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.pic{
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.pic .red{
position:relative;
top:0px;
width:320px;
height:75px;
background:#FF2400;
opacity:0;
}
.pic .yellow{
width:320px;
height:75px;
top:75px;
background:#FFA500;
opacity:0;
}
.pic .green
{
width:320px;
height:90px;
top:75px;
background:#008000;
opacity:0;
}
.pic:hover .red,.pic:hover .yellow,.pic:hover .green
{
opacity:0.9;
}
</style>
</head>
<body>
<div class="pic">
<div class="red">
</div>
<div class="yellow">
</div>
<div class="green">
</div>
</div>
</body>
</html>Text background overlay
The following code shows how to give a Text Background color overlay while mouse hover. Here yo can see how to overlay text over div element.
Move mouse over the textbox…….
Greenpeace is a non-governmental environmental organization with offices in over forty countries and with an international coordinating body in Amsterdam, the Netherlands
CSS Text hover Color Overlay
Source Code
More about CSS Hover Effects….CSS Image Hover
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.text{
width:300px;
height:150px;
padding:10px;
font-size:20px;
font-weight:700;
font-family:"Times New Roman", Times, serif;
text-align:justify;
background:#FFA500;
border:5px solid #000000;
}
.text:hover
{
position:relative;
top:0px;
background:#FFFFFF;
}
</style>
</head>
<body>
<div class="text">
Greenpeace is a non-governmental
environmental organization with
offices in over forty countries
and with an international coordinating
body in Amsterdam, the Netherlands
</div>
</body>
</html>Position one image on top of another
The following css code shows how to overlaying image on another image.
CSS Image Hover Overlay
Move mouse over the image…….
CSS image overlay effects
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.imgOverlay
{
width: 240px;
height: 240px;
background: url(img/fish-all.png) no-repeat;
}
.imgOverlay:hover {
background: url(img/flower.png) no-repeat;
}
</style>
</head>
<body>
<div class="imgOverlay">
</div>
</body>
</html>Multiple Background Images
The following CSS code shows how to position multiple image on top of another image.
Multiple image overlay
Move mouse over the image….
Transparent image overlay on hover
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.multiPic{
width:320px;
height:235px;
background: url(img/fish-all.png) no-repeat;
border:5px solid #000000;
}
.multiPic .text1{
position:relative;
top:0px;
width:320px;
height:80px;
background:#FF2400;
background: url(img/fish-1.png) no-repeat;
opacity:0;
}
.multiPic .text2{
width:320px;
height:80px;
top:75px;
background:#FFA500;
background: url(img/fish-2.png) no-repeat;
opacity:0;
}
.multiPic .text3
{
width:320px;
height:80px;
top:75px;
background:#008000;
background: url(img/fish-3.png) no-repeat;
opacity:0;
}
.multiPic:hover .text1,.multiPic:hover .text2,.multiPic:hover .text3
{
opacity:0.9;
}
</style>
</head>
<body>
<div class="multiPic">
<div class="text1">
</div>
<div class="text2">
</div>
<div class="text3">
</div>
</div>
</body>
</html>CSS image hover text overlay
How to position text over an image ? .. From the following CSS Code, you can learn how to overlay text on images.
Move mouse over the image…
The tiger is the largest cat species, reaching a total body length of up to 3.3 m and weighing up to 306 kg. Its most recognizable feature is a pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
Overlay Text On Images
Source Code
More about CSS Image Caption Overlay….CSS Image Captions
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.txtOverlay{
width:390px;
height:206px;
opacity:0.9;
font-size:20px;
font-weight:700;
text-align:justify;
border:5px solid #FFA500;
padding:5px;
background: url(img/tiger-img.png) no-repeat;
}
.theText{
opacity:0;
}
.txtOverlay:hover .theText
{
opacity:0.9;
color:#FFFFFF;
font-size:20px;
font-weight:700;
}
</style>
</head>
<body>
<div class="txtOverlay">
<div class="theText">
<br><br>
The tiger is the largest cat species,
reaching a total body length of up to
3.3 m and weighing up to 306 kg. Its
most recognizable feature is a pattern
of dark vertical stripes on reddish-orange
fur with a lighter underside.<br><br>
</div>
</div>
</body>
</html>Transparent Background Images, overlay a transparent div on an image
How to position image over text
The following CSS code shows how to Floating An Image Over Text
Move your mouse over the textbox……
Overlay Image On Text
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.overlayPic{
width:390px;
height:206px;
opacity:0.9;
font-size:20px;
font-weight:700;
text-align:justify;
border:5px solid #FFA500;
padding:5px;
}
.overlayPic:hover
{
opacity:0.9;
color:#000000;
font-size:20px;
font-weight:700;
background: url(img/tiger-img.png) no-repeat;
}
</style>
</head>
<body>
<div class="overlayPic">
<br><br>
The tiger is the largest cat species,
reaching a total body length of up to
3.3 m and weighing up to 306 kg. Its
most recognizable feature is a pattern
of dark vertical stripes on reddish-orange
fur with a lighter underside.<br><br>
Move your mouse over here......
</div>
</body>
</html>How to Fullscreen Overlay Effects ….CSS Fullscreen overlay