HTML/CSS How to Create a CSS Hover Effect That Displays Text?

[shivajikobardan]

TL;DR

How do I build component that shows some text when I hover over it?

https://practice-project-html-css.vercel.app/

I'm talking about this one.
When you hover there, it shows some text. How do I make it?

 <div class="grid-container">
        <div class="one"><img src="project1.png" alt="" /></div>
        <div class="two"><img src="Project2.png" alt="" /></div>
        <div class="three"><img src="project3.png" alt="" /></div>
        <div class="four"><img src="project4.png" alt="" /></div>
        <div class="five"><img src="project5.png" alt="" /></div>
        <div class="six"><img src="project6.png" alt="" /></div>
        <div class="seven"><img src="project7.png" alt="" /></div>
        <div class="eight"><img src="project8.png" alt="" /></div>
        <div class="nine"><img src="project9.png" alt="" /></div>
      </div>

.grid-container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  
}

Please tell me how to implement this feature.

 

[pbuk]

This is known as a "card with a slide-up caption" or more simply a "CSS hover effect". You can search for this.

 

[jack action]

While inspecting a web page, you can toggle the pseudo-class :hover and see the related CSS.

Firefox:

1. Open the Inspector
2. Toggle a pseudo-class

Chrome:

1. Open Chrome DevTools
2. Toggle a pseudo-class

 

[DrJohn]

You can give the image an alt text or title text or both, usually the same text, as some browsers display the alt text and others display the title text on hover, with no programming required by you to make it happen.

But the example you give is a css hover effect, which is shown in the source code. The text is there in the source code, and on hover it uses a class (in the html) and a transition (in the css) to slide it up.

There are useful libraries of effects such as Wow.js and animate.css that make life easier for you. Animate.css is called in the header of the sample page.