onclick Overlay effect - html

Question

I just need to add a overlay effect on clicking the three dots. It should display a white background on top of that, transition should be from bottom.
I have attached the codepen link.
To preview your work...
Use this codepen link....
https://codepen.io/subin_s/pen/NVgLgx
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div class="projects">
<div class="image">
</div>
<div class="words">
<h2>BlogSpire</h2>
<i class="fas fa-ellipsis-v" id="moreinfo"></i>
<div class="clearfix"></div>
<p>Blogging web app created for the Engineering team at WeSpire.</p>
</div>
</div>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Roboto';
}
.projects {
position:relative;
margin:2rem;
width: 335px;
height:400px;
background-color:#fff;
border-radius:5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.image {
position:absolute;
width:100%;
height:240px;
background-color:skyblue;
}
.words {
position:absolute;
top:240px;
padding:20px 20px 30px;
color:#333;
}
.words i {
position:absolute;
top:27px;
right:40px;
cursor:pointer;
}
.words h2 {
color:#008073;
}
.words p {
padding:13px 0 0;
}
JS
document.getElementById('moreinfo').addEventListener('click', projectInfo);
function projectInfo() {
}

Answer 1

You can add the overlay by adding a element commonly a div inside of your card, and setting its position to absolute. You can position it around using the top, left, bottom or right attributes.
To create the animation of the overlay comming from the bottom, you can create a simple css transition, changing the values of the top css attribute.
I've edited your code to create a small example on top of it. I hope it helps you.
const moreInfoElement = document.getElementById('moreinfo');
const overlay = document.getElementById('overlay');
moreInfoElement.addEventListener('click', projectInfo);
function projectInfo() {
overlay.classList.add('active-overlay');
setTimeout(() => {
overlay.classList.remove('active-overlay');
}, 3000);
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Roboto';
}
.projects {
position:relative;
margin:2rem;
width: 335px;
height:400px;
background-color:#fff;
border-radius:5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
overflow: hidden;
}
.image {
position:absolute;
width:100%;
height:240px;
background-color:skyblue;
}
.words {
position:absolute;
top:240px;
padding:20px 20px 30px;
color:#333;
}
.words i {
position:absolute;
top:27px;
right:40px;
cursor:pointer;
}
.words h2 {
color:#008073;
}
.words p {
padding:13px 0 0;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1;
transition: all .6s;
}
.active-overlay{
top: 0;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="projects">
<div id="overlay" class="overlay">
Some text
</div>
<div class="image">
</div>
<div class="words">
<h2>BlogSpire</h2>
<i class="fas fa-ellipsis-v" id="moreinfo"></i>
<div class="clearfix"></div>
<p>Blogging web app created for the Engineering team at WeSpire.</p>
</div>
</div>