Frontend Forever App

We have a mobile app for you to download and use. And you can unlock many features in the app.

Get it now
Intall Later

Text Portrait Overlay Words

About this Code

       Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Text Portrait Overlay Words. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Today I'd want to demonstrate how to create this text portrait overlay using simple HTML and CSS.


When you combine the two, you obtain typographic portraits, which are portraits created using one or more fonts and made up of type characters. Taking a picture of someone's face and using a Photoshop plug-in to turn the photo's greyscale into words and paragraphs is the simplest approach to making a typographic portrait.
Making A Portrait Out Of Text
Before we start, I should point out that since the first thing we'll be doing is cropping some of it away, you'll probably want to work on a duplicate of your photo rather than the original image for this effect. Go to the File menu at the top of the screen and select Save As to save a copy of the image. Save the file as a portrait.html file and give it a new name, such as "text-portrait-effect" or another name that makes sense to you. In this manner, you can alter the image whatever you desire without worrying about affecting the original.

A. P. J. Abdul Kalam

Born on October 15, 1931, and dying on July 27, 2015, Avul Pakir Jainulabdeen Abdul Kalam was an Indian aeronautical scientist who served as India's eleventh president from 2002 to 2007. He was raised in Rameswaram, Tamil Nadu, and studied physics and aeronautical engineering there. For the next four decades, he worked largely at the Defence Research and Development Organization (DRDO) and the Indian Space Research Organization (ISRO) as a scientist and science administrator (DRDO). He played a significant role in both India's civilian space program and its efforts to produce military weapons. He was known as the "Missile Man of India" for his contributions to the development of ballistic missiles and launch vehicle technologies. 

Michael Jackson

American singer, composer, and dancer Michael Joseph Jackson was born on August 29, 1958, and died on June 25, 2009. He is referred to as the "King of Pop" and is regarded as one of the most significant cultural figures of the 20th century. Over the course of a four-decade career, his contributions to dance, fashion, music, and his publicized personal life made him a widely recognized figure in popular culture. Musicians from different musical genres were influenced by Jackson. He popularised challenging dance moves like the robot and the moonwalk through his stage and film performances, and he also gave these moves their names. He is the recipient of the most accolades ever bestowed upon a single performer.


These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Leave a Comment

You need to login first to comment.