CSS Overlay

Add Black Image Overlay with CSS Transparency

Add Black Image Overlay with CSS Transparency

In this article, I will show you how to add a black transparent black overlay to the image by using the CSS only. I will do that without affecting the text or other overlap elements. Just to be…

Read More »

How To Position CSS Overlay Image Over Image

CSS Overlay Image Over Image

By using CSS, We can easily overlay an image over another image. Adding an image to another bigger image, Just like you have seen on youtube video thumbs — A play button is displayed on the top of…

Read More »

Add Background Image Gradient Overlay with CSS

Background Image Gradient Overlay

If you wanted to add a semi-opaque or semi-transparent color gradient that goes on top of the background image, You might need to overlay another div (or use the position absolutely element). However, the simplest way to do…

Read More »

CSS Image Overlay Text on Hover

The CSS overly is a way of adding opacity color background over an image. This opacity can be 50% which make the picture darkens a little bit. And then to add a readable white text or read more…

Read More »

Create CSS Background Image Color Overlay

Create CSS Background Image Color Overlay

Today, we will learn how to add color overlay by using a CSS background image instead of placing an image tag. We will use Opacity and background property to create it. We will add  transparent CSS color overlay…

Read More »

Color Transparent Overlay Text on Image hover with CSS Only

Color Transparent Overlay Text on Image

Creating a color transparent overlay text when users hover over the image is simple and obvious to do with CSS only. It is a way to add some interaction to your website. In our previous post, We have…

Read More »

Transparent Overlay Background Image Using CSS

Transparent Overlay Background Image Using CSS

With the help of CSS opacity or RBG color, We can easily add a transparent overlay background image. The opacity property allows specifying the transparency of an element. But the RGB color values specify with RGB(red, green, blue)…

Read More »

How to Overlay a Logo on HTML5 Video

Place a logo over HTML5 video with CSS

Do you want to place a logo on HTML5 video? In this tutorial, We will show you how to add it and align anywhere over the video by using little code of CSS and HTML. You may know…

Read More »

Simplest way to Create CSS Fade In Overlay on Image Hover

Fade in Overlay on Image Hover

That is the simple tutorial about creating CSS overlay with fade in effect when hover an image. We will use an easy way to create an animated image overlay without any fallback. The animation like fading in or…

Read More »

Responsive CSS Fullscreen Overlay with Blur Background

Responsive CSS Fullscreen Overlay with Blur Background

The modal & popup are the great things to implement when you want to provide more information to the user on the same page. It also can be used to provide a full version of photos or content….

Read More »

Animated CSS Overlay Image with Text on Hover

Animated CSS Overlay Image with Text on Hover

In this post, We will show you how to add Animated CSS Overlay Image with Text while hover the image. The overlay allows showing content over the picture and this technique work when the user hovers an image….

Read More »

How to Overlay Text on HTML5 Video

How to Overlay Text on HTML5 Video

It’s easy to overlay text over the images but what about adding text over the HTML5 video element? Yep! it’s easy and quite possible with few lines of CSS. I am going to use the same method which…

Read More »

How to Add HTML5 Video Overlay Play Button

HTML5 Video Overlay Play Button

It is isn’t quite hard to add the Overlay Play button over HTML5 video. All we need to use the CSS and bit of Javascript. In our previous article, we have explained the method of adding CSS text…

Read More »