Issue
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 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>
CSS:
.grid-container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
}
Solution
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 class="image-container">
Hover me
<div class="container-text">Message</div>
</div>
Answered By - Rokit
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.