How to create an image overlay icon using HTML and CSS

Overview

Image overlay is the overlay of two images or icons, where one icon or image appears on the screen while the other icon appears on the screen when the cursor hovers over the first image. So, to implement this feature we should have basic knowledge of HTML and CSS and their properties for transitions and animations. So in order to create an overlay, we're going to see some examples of creating an inner overlay icon.

algorithm

Step 1 - Create an HTML file in a text editor and create an HTML boilerplate within the file.

Step 2 − Now create a div container containing an image (one of which is a static image) and another image icon (hover the mouse over the image displayed when up).

Step 3 − Insert the img tag with the src attribute. Add the image link to the src attribute.

<img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="How to create an image overlay icon using HTML and CSS" >

Step 4 − Now insert the font Awesome CDN link into the head tag of the HTML document. CDN link below.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 5 − Now use the font Awesome user icon class to make the overlay image.

<i class="fa fa-user">

Step 6 − Now create a style.css file in the same folder and link the style.css file to the HTML document.

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

Step 7 − Set the style of the HTML element and style it so that the overlay should appear when hovering over the image.

Step 8 − The image overlay has been created successfully.

Example

In this example, we created an image overlay using an image and a font Awesome icon. The font Awesome user icon class is imported from the font Awesome library. So to build this we created two files in a folder, one file contains index.html which contains the skeleton part of the function and another file is style.css which contains the styles and main part of the function Work.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">
   
   


   

      <img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="How to create an image overlay icon using HTML and CSS" >
      

         
tutorialspoint.com
         
      
   

The images given below are the output of the above example where the first image shows the output when the above function is loaded in the browser and the second image shows the output when the cursor is hovered over the first image . So when any user hovers over the given image, it displays the overlapping image.

in conclusion

This feature is used in applications like contact books, where the user's profile is displayed on an image, and when the user clicks or hovers over the image, it displays the details of a specific profile. If you are building this feature, you must check that the image or icon, the static image and the image displayed on mouseover should have the same dimensions, i.e. equal width and height.

The above is the detailed content of How to create an image overlay icon using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!