Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding an Overlay to your Graphics with CSS

In this article, Solodev shows you how to add a title overlay to your graphics which is triggered when hovering over an image.

Image overlays are a great way to get the most out of the space on a web page. While one static graphic is better than none, adding an overlay provides more context to the content you'll find after clicking the image.

By simply hovering over the image, you gain a further glimpse into why you should click on that particular image. In this article, Solodev shows you how to add a title overlay effect to your graphics which is triggered when hovering over any of the images in the grid.

Below is the HTML, CSS, and JavaScript required.

Step 1 - overlay.html

Copy and paste the HTML below into your web page

<section class="work-tiles">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>A New Approach to Business</h2>
        <p>WebCorpCo has what it takes to show the world you mean business.</p>
      </div>
      <div class="row">
        <ul>
          <li class="col-xs-6 col-md-4 work-tiles-items">
            <img src="https://www.solodev.com/core/fileparse.php/374/urlt/slide-1.png" alt="Zeina">
            <div class="text-overlay hidden-xs">
              <span>Marketing</span>
            </div>
          </li>
          <li class="col-xs-6 col-md-4 work-tiles-items">
            <img src="https://www.solodev.com/core/fileparse.php/374/urlt/slide-2.png" alt="Logic +">
            <div class="text-overlay hidden-xs">
              <span>Sales</span>
            </div>
          </li>
          <li class="col-xs-6 col-md-4 work-tiles-items">
            <img src="https://www.solodev.com/core/fileparse.php/374/urlt/slide-3.png" alt="SoftTech">
            <div class="text-overlay hidden-xs">
              <span>Design</span>
            </div>
          </li>
          <li class="col-xs-6 col-md-4 work-tiles-items">
            <img src="https://www.solodev.com/core/fileparse.php/374/urlt/slide-4.png" alt="3Designs">
            <div class="text-overlay hidden-xs">
              <span>Hosting</span>
            </div>
          </li>
          <li class="col-xs-6 col-md-4 work-tiles-items">
            <img src="https://www.solodev.com/core/fileparse.php/374/urlt/slide-5.png" alt="DevTech">
            <div class="text-overlay hidden-xs">
              <span>Support</span>
            </div>
          </li>
          <li class="col-xs-6 col-md-4 work-tiles-items">
            <img src="https://www.solodev.com/core/fileparse.php/374/urlt/slide-6.png" alt="Chartz">
            <div class="text-overlay hidden-xs">
              <span>Training</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Step 2 - overlay.css

Download the CSS below and include it in your web page

overlay.css

Step 3 - Add the includes below to your web page

<link rel="stylesheet" href="overlay.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this article, Solodev showed you how to add an overlay effect to your website's images which are triggered when hovering. Swap out the images and text to make it your own!

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev