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

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

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

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

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

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

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

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

How to Fullscreen Overlay Effects ....CSS Fullscreen overlay