ITS ABHIK

Having captions on your images can be an effective way to communicate information to viewers. Not only do they provide context to the image, they can also provide an interesting way to tell a story or provide additional information to viewers. However, having captions visible all the time can take away from the visual impact of the image and can also be intrusive.

The good news is that you can use HTML and CSS to display image captions only on hover. This means that when a user hovers over the image, a caption will appear, giving them more information about the image. This is a great way to provide captions without taking away from the visual impact of the image.

In this article, we will show you how to display image captions only on hover using HTML and CSS.

Before we start, you will need to have a basic understanding of HTML and CSS. If you are not familiar with these languages, we recommend that you take some time to familiarize yourself with them first.

Step 1: Creating the HTML

The first step is to create the HTML for the image. To do this, we will use the following HTML code:

<img src=”image.jpg” alt=”Image description” title=”Image caption”>

In the code above, we have included the source of the image, the alt attribute and the title attribute. The alt attribute is used to provide a description of the image and the title attribute is used to provide a caption.

Step 2: Adding the CSS

Now that we have the HTML in place, we need to add the CSS that will hide the caption until the user hovers over the image. To do this, we will use the following CSS code:

img {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

img:hover {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

The code above will set the opacity of the image to 1 when the user is not hovering over it, and it will set the opacity to 0 when the user is hovering over it. This will create the effect of the caption being hidden until the user hovers over the image.

Step 3: Adding the Caption

Finally, we need to add the caption that will be displayed when the user hovers over the image. To do this, we will use the following HTML code:

<div class=”caption”>Image caption</div>

This code will create a div with the class “caption” that will contain the caption for the image.

Step 4: Styling the Caption

Now that we have the HTML and CSS in place, we can add some styling to the caption. To do this, we will use the following CSS code:

.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
text-align: center;
font-size: 14px;
}

The code above will style the caption so that it appears at the bottom of the image with a black background and white text. You can adjust the styling as desired to create the look that you want.

And that’s it! You have now successfully created a way to hide captions until the user hovers over the image. This is a great way to provide captions without taking away from the visual impact of the image. Try it out on your own website and see what you think.