Open In App

How to put the text inside of a created icon?

Improve
Improve
Like Article
Like
Save
Share
Report

The task is to put a text inside of a created icon. This post will go over some of the different ways in which you can put a text inside/over of a created icon/image(s). All of the discussed solutions follow a different presentation based on the same base idea i.e, to write/put the text over the image/icon make the image/icon an background image/icon using division, and then write the text.

  • Solution 1:




    <!DOCTYPE html>
    <html>
        <head> </head>
        <body>
            <!--Add HTML:-->
      
            <div class="container">
                <img src=
                     alt="GFG"
                     style="width: 100%;" />
                <div class="text-block">
                    <h4>Programming</h4>
                    <p>Geeks For Geeks</p>
                </div>
            </div>
      
            <style>
                //Add CSS:
                * {
                    box-sizing: border-box;
                }
      
                /* Container holding the image and the text */
                .container {
                    position: relative;
                }
      
                /* Bottom right text */
                .text-block {
                    position: absolute;
                    bottom: 0px;
                    right: 20px;
                    background-color: black;
                    color: white;
                    padding-left: 20px;
                    padding-right: 20px;
                }
            </style>
        </body>
    </html>

    
    

    Output:

    Explanation: Using the .container division we make the image an background image and then using the styling .text-block division we make a box with text in it and placing it in absolute position (this value tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and instead placed in an exact location on the page) with preferred styling using CSS.

  • Solution 2:




    <!DOCTYPE html>
    <html>
        <head> </head>
        <body>
            <!-- Write HTML code here -->
      
            <div class="container">
                <img src=
                     alt="GFG" 
                     style="width: 100%;" />
                <div class="content">
                    <h1>Heading</h1>
                    <p>Geeks For Geeks</p>
                </div>
            </div>
      
            <style>
                // CSS Code
                * {
                    box-sizing: border-box;
                }
      
                .container {
                    position: relative;
                    max-width: 800px; /* Maximum width */
                    margin: 0 auto; /* Center it */
                }
      
                .container .content {
                   /* Position the background text */
                    position: absolute;
         /* At the bottom. Use top:0 to append it to the top */
                    bottom: 0px; 
                  /* Black background with 0.5 opacity */
                    background: rgba(0, 0, 0, 0.3); 
                    color: #f1f1f1; /* Grey text */
                    width: 100%; /* Full width */
                    padding: 20px; /* Some padding */
                }
            </style>
        </body>
    </html>

    
    

    Output:

    Explanation: Using the same approach as above but instead of creating a text box we overlay the content on the image/icon in this approach but simply adjusting the width property of the division using CSS i.e., setting “width: 100%;” make the text overlay on the full width of the image/icon.

  • Solution 3: Hover the mouse over the Image




    <!DOCTYPE html>
    <html>
        <head> </head>
        <body>
            <!-- Write HTML code here -->
      
            <div class="container">
                <img src=
                     alt="GFG"
                     style="width: 100%;" />
                <div class="overlay">Geeks For Geeks</div>
            </div>
      
            <style>
                * {
                    box-sizing: border-box;
                }
      
                /* Container needed to position
              the overlay. Adjust the width as needed */
                .container {
                    position: relative;
                }
      
                /* Make the image to responsive */
                .image {
                    display: block;
                    width: 100%;
                    height: auto;
                }
      
                /* The overlay effect - lays on top of 
              the container and over the image */
                .overlay {
                    position: absolute;
                    bottom: 0;
                  /* Black see-through */
                    background: rgba(0, 0, 0, 0.5); 
                    color: #f1f1f1;
                    width: 100%;
                    transition: 0.5s ease;
                    opacity: 0;
                    color: white;
                    font-size: 20px;
                    padding: 20px;
                    text-align: center;
                }
      
                /* When you mouse over the 
              container, fade in the overlay title */
                .container:hover .overlay {
                    opacity: 1;
                }
            </style>
        </body>
    </html>

    
    

    Output:
    Original:

    On Hover:

    Explanation: In this solution we make the image/icon an background image/icon and overlay the text on the image as an above solution but make the text/content disappear using the “opacity : 0;” styling in .overlay division and when the user hovers over the image we again set the opacity visible using “opacity: 1;”.



Last Updated : 31 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads