I have created a container with class name “info” and it holds a box with id “info-box”, the idea is that when i click a button it should cover the whole body and go when clicked again, i want it to zoom-in and fade-in while entering and zoom-out and fade-out while leaving i have some code that helps me slide from top, can anyone help me how i can do the effect. This is the code so far:
.info
{
width: 100%;
height: 100%;
display: flex;
text-align:center;
justify-content:center;
align-items:center;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 100;
transition: all 0.7s cubic-bezier(0.7, 0, 0, 1);
}
.close
{
width: 100%;
height: 100%;
display: flex;
text-align:center;
justify-content:center;
align-items:center;
background:rgba(255,255,255,0.5);
position: fixed;
top: -1000px;
left: 0;
z-index: 100;
transition: all 0.7s cubic-bezier(0.7, 0, 0, 1);
}
#info-box
{
width:45%;
background:#fff;
border-radius: 4px;
font-size:2.5rem;
}
@pabbasaiharsha, you can use jquery for the purpose
something like this
$('button').click(()=>{
$('your-selector-here').toggleClass('your-new-class-here');
});
I don’t think that gives a zoom and fade type of transition and I am using react for this project