How to use CSS Display Property In CSS
This approach involves initially hiding the paragraph by setting its display property to “none”. When the user interacts with the image, such as hovering over it, the display property of the paragraph is changed to block or inline, making it visible.
Example: This example shows the use of the above-explained approach.
<!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;
display: none;
}
.image-container:hover .hidden-paragraph {
display: block;
}
</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.
Table of Content
- Using CSS Positioning
- Using CSS Opacity
- Using CSS Display Property
- Using JavaScript