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

I'm talking about "PROJECTS".

When you hover there, it shows some text. How do I make it?

Like this: https://imgur.com/a/N86uRpP

HTML:

<div >
        <div ><img src="project1.png" alt="" /></div>
        <div ><img src="Project2.png" alt="" /></div>
        <div ><img src="project3.png" alt="" /></div>
        <div ><img src="project4.png" alt="" /></div>
        <div ><img src="project5.png" alt="" /></div>
        <div ><img src="project6.png" alt="" /></div>
        <div ><img src="project7.png" alt="" /></div>
        <div ><img src="project8.png" alt="" /></div>
        <div ><img src="project9.png" alt="" /></div>
      </div>

CSS:

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

CodePudding user response：

You can check this example.

https://codepen.io/francisco-kataldo/pen/LBBryV

If you want more you can check this page.

https://ordinarycoders.com/blog/article/codepen-bootstrap-card-hovers

CodePudding user response：

To achieve this effect, you can use a combination of the overflow and position properties. The idea is to set overflow-y: hidden; and give it a set height. Then, position the child container so that it falls outside of the parent container. When the parent container is hovered, the bottom property along with position: absolute; can be used to transition it into view.

.image-container {
  position: relative;
  color: white;
  background-color: #888;
  height: 100px;
  padding: 10px;
  overflow-y: hidden;
}

.image-container:hover .container-text {
  bottom: 0px;
}

.container-text {
  position: absolute;
  bottom: -60px;
  left: 0;
  transition: bottom 200ms;
  text-align: center;
  padding: 10px;
  background-color: #444;
  width: 100%;
  box-sizing: border-box;
}

<div >
  Hover me
  <div >Message</div>
</div>