CSS Image Overlay Icon

Please Share On:

Definition:

Here, you are going to learn how an icon will appear over an image when you hover your mouse cursor over the image.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need an image and an icon. Make an HTML container and put your image and an icon in it.

You can use font Awesome icons and define a link in your HTML code before using it. See an example below:

HTML Source Code:

<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">    

<div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
      <div class="overlay">
     <a href="#" class="icon" title="thumbs-up">
      <i class="fa fa-thumbs-up" aria-hidden="true"></i>
    </a>
</div>
    </div>

CSS Source Code:

<style>
    .container {
      position: relative;
      width: 100%;
      max-width: 400px;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .3s ease;
    }

    .container:hover .overlay {
      opacity: 0.5;
    }

    .icon {
      background: white;
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
    <style>
    .container {
      position: relative;
      width: 100%;
      max-width: 400px;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .3s ease;
    }

    .container:hover .overlay {
      opacity: 0.5;
    }

    .icon {
      background: white;
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    </style>
 
  </head>
  
  <body> 
        <div class="container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
          <div class="overlay">
           <a href="#" class="icon" title="thumbs-up">
            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
          </a>
			</div>
    	</div>  
  </body>
</html>

Output:

Donate to support writers.

You may be interested in the following topics:

Post Views: 1,282