How to use CSS Positioning In CSS

Using CSS Opacity

This approach involves positioning the paragraph absolutely relative to the image container and setting its initial visibility to hidden. When the user interacts with the image, such as hovering over it, the paragraph’s visibility is changed to visible.

Example: This example shows the use of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS Positioning</title>
</head>
<style>
    /* CSS Here */
    .image-container {
        position: relative;
        display: inline-block;
    }

    .hidden-paragraph {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
    }

    .image-container:hover .hidden-paragraph {
        visibility: visible;
    }
</style>

<body>
    <div class="image-container">
        <img src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image">
        <p class="hidden-paragraph">w3wiki is a computer science
            portal that offers resources for programmers and technology
            enthusiasts. It provides a wide range of courses, tutorials,
            coding challenges, and interview preparation materials </p>
    </div>
</body>

</html>

Output:

How to Hide a Paragraph Under an Image ?

Hiding a paragraph under an image is a common requirement in web development, especially in cases where you want to reveal additional content when the user interacts with an image.

This article will explore various approaches to achieve this functionality using HTML and CSS.