How to Create A Simple CSS Overlay


Introduction

In this post, I will explain how to make a simple overlay using CSS only. This CSS overlay is lightweight and doesn’t require JavaScript. We can use CSS overlay in browser which support CSS3 transition like Chrome 26+, Safari 6.1+, Firefox 16+, Opera 12.1+ and IE 10+.

HTML

In the HTML document, you need outer <div> that containing inner <div> and images. Inner <div> will be displayed when you hover on outer <div>. Here is the source for the HTML document.


<html>

    <head>

        <title>Simple CSS Overlay</title>

        <link rel="stylesheet" href="css/style.css" />

    </head>

    <body>


<div class="box">

            <img src="images/unsplash-1.jpg" alt="Box Image">


<div class="overlay">


<div class="title">Overlay Title</div>



<div class="category">Overlay Category</div>


            </div>


        </div>


    </body>

</html>

 

CSS

After you write the HTML, create a new CSS file. On the outer <div> set the position to be position: relative while the inner <div> set position into position: absolute. Then set inner <div> into top: 0, left: 0, right: 0, and bottom: 0.

When you have finished adding property above, you can adjust the opacity, color, transition, etc. Here is the complete CSS code:


.box {
    display: block;
    float: left;
    margin-right: 50px;
    margin-bottom: 50px;
    position: relative;
}

.box img {
    width: 400px;
    height: 300px;
}

.box .overlay {
    color: #ffffff;
    cursor: pointer;
    background-color: rgba(46,204,113,0.9);
    width: 400px;
    height: 300px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    position: absolute;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.box .overlay:hover {
    opacity: 1;
}

.box .overlay .title {
    font-size: 20px;
    font-weight: bold;
    left: 20px;
    bottom: 0;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.box .overlay:hover .title {
    bottom: 35px;
}

.box .overlay .category {
    font-size: 12px;
    left: 20px;
    bottom: 0;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.box .overlay:hover .category {
    bottom: 20px;
}


overlay-preview

Thus tutorial how to make a simple CSS overlay. You can see the results on the DEMO or DOWNLOAD the file here.

you might also liked

comments

LEAVE A COMMENT


Get Latest Update

Weekly updates of best free resource on the web. Great solutions for designers & developers

advertisment

Please insert your advertisment shortcode

What Is Junglegraphic

junglegraphic is a website for designers & developers Enthusiast to search a freebies & Tutorials From beginner to intermediate.

junglegraphic development

junglegraphic has been developed by Illiyin studio with wordpress machine

stay in touch

Subscibe our RSS and don't be shy to like our Facebook follow our twitter and stalking our Instagram.