How to put the text inside of a created icon?

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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;”.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.