Image Expanding Hover Effect Using HTML and CSS

Web development allows us to create visually stunning and interactive elements using HTML and CSS. Today, we're going to explore how to create an Instagram logo using these basic techniques. Whether you're an experienced developer or just starting your journey in web development, this guide will walk you through the process while providing you with the source code to get you started.

The Instagram logo, known for its iconic camera design, is instantly recognizable around the world. In this tutorial, we'll recreate this logo by breaking it down into simple, manageable parts using HTML and CSS.

HTML Structure

The HTML structure of our Instagram logo consists of nested div elements, each representing different parts of the logo: the outer circle, the inner circle, and the dot (representing the camera lens). Here is the HTML code snippet:

  <div class="insta-logo">
        <div class="outer">
            <div class="inner"></div>
            <div class="dot"></div>
        </div>
     </div>

Explanation:

• insta-logo: The main container holding the entire logo.
• outer: Represents the outer circle of the Instagram logo.
• inner: Represents the inner circle of the logo.
• dot: Represents the lens dot on the logo.

CSS Styling

Next, let’s style our HTML elements to bring the Instagram logo to life. We'll use CSS to shape, color, and position the elements to resemble the logo. Below is the CSS code snippet:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.insta-logo{
    width: 350px;
    height: 350px;
    background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%) ;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.outer{
    width: 260px;
    height: 260px;
    border: 20px solid white;
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.inner{
    width: 150px;
    height: 150px;
    border: 20px solid white;
    border-radius: 50%;
}
.dot{
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    right: 20px;
}

The Explanation:

Insta-logo: We create a radial gradient background to mimic the colors of the Instagram logo and resize it using border-radius.
External: A circle with a white border, in the middle of the Insta-logo div.
Inner: A small circle with a white border, placed inside the outer div to create a ring effect.
Dot: A small white circle positioned to represent the camera lens.

Conclusion

With a few lines of HTML and CSS, we have successfully recreated the Instagram logo. This project is a great way to explore the capabilities of HTML and CSS to create something attractive and iconic. Feel free to play with the code, adjust color, size, and position to create your own variations!