How to create an overlay in css

Transparent Image Overlay

The following CSS code shows how to Transperant 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

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

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



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.

Move your mouse over here......

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 Full Page Overlay Window....CSS Fullscreen overlay


CoreLangs.com








Home  |  Terms of Use  |  About Us
CoreLangs.com ©: 2014
All Rights Reserved. All other trademarks are property of their respective owners.