How to create Image Stack Illusion using HTML and CSS ?

How to Create Avatar Images using HTML and CSS ?

Last Updated : 26 Dec, 2023

This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites.

Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radius to 50%.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .avatar-container {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>
        Create Avatar Images 
        using HTML and CSS
    </title>
</head>

<body>
    <div class="avatar-container">
        <div class="avatar">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo">
        </div>
    </div>
</body>

</html>

Output:

How to Create Avatar Images using HTML and CSS ?

How to create Image Stack Illusion using HTML and CSS ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to create a Hero Image using HTML and CSS ?

A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The

How to Create Badges using HTML and CSS ?

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that

How To Create a Thumbnail Image using HTML and CSS ?

The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye

How to create Image Stack Illusion using HTML and CSS ?

In this article, we are going to create an illusion of images below the main image. It is the same as the image set of the gallery in an older version of Android. This is a simple project, we can achieve our target only by using HTML AND CSS.Overview of the project:Approach:Create a main div in whic

How to Create an Image Overlay Icon using HTML and CSS ?

Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us

How to Add Border to an Image Using HTML and CSS?

Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im