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>