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:--><divclass="container"><imgsrc=alt="GFG"style="width: 100%;"/><divclass="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 --><divclass="container"><imgsrc=alt="GFG"style="width: 100%;"/><divclass="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 --><divclass="container"><imgsrc=alt="GFG"style="width: 100%;"/><divclass="overlay">Geeks For Geeks</div></div><style>* {box-sizing: border-box;}/* Container needed to positionthe 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 ofthe 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 thecontainer, 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;”.
