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 on hover and show a plus “+” sign. You can replace it with your text without adding additional code.

We will use RGBA color for overlaying the element with photo and also define opacity with its value. The RGBA allows declaring a background color in CSS which includes alpha transparency.

We know that the color overlays are nice fun to add impressive addition to an image or image gallery.  As I will use the Opacity property, I will set it’s value to 0 on default stat and change the value to 1 when hovering an image.

To add some nice effect, I will take the help of  CSS transition property and ease the opacity value to 0.25s.

Without going further in details, let’s have a look at how we can create it.

How to Create CSS Background Image Color Overlay

There is nothing special coding required. All you need to add a div with a class name overlaytwo and we will define a background image in CSS.

We have another div with class name overhide and we place it inside the parent div. This child div will be hidden until the user hover.

You can add a link and wrap it over the span tag if you want to add additional functionality. Like Open the thumbnail to open a big image.

We have added a plus sign which of course you can replace with something else.

<div class="overlaytwo">
    <div class="overhide">
        <a href="#" title="Title Here">
            <span class="plusicon">+</span>
        </a>
    </div>
</div>

Styling Background Image

Let’s simply add the background in CSS for the main container.

.overlaytwo {
   background:url(../img/overlay2.jpg);
   width:480px;
   height: 360px;
    display: inline-block;

}

Hidding Color Overlay

The div which contain overlay content including background, We will set opacity 0 so it should not show up on default state.

The background color for the overlay is black transparent and have done by RBGA color system.

.overhide {
    background: rgba(0,0,0,.75);
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease 0s;
    padding: 124px;
}

Show Overlay Background

Simply set the opacity value to 1 to show it on hover.

.overhide:hover  {
    opacity: 1;
}

Little Styling Plus Icon

We will make look good Plus Icon with by adding some color, font-size, and font-family.

.plusicon {
    font-family:Helvetica;
    font-weight:900;
    color: #fff;
    font-size: 96px;
       
}

Nothing more. Just check the demo and download the source code.

You May Also Like

Leave a Comment