Colin Harris Colin Harris - 4 months ago 18
CSS Question

Reveal a HTML Div Via Animation?

I have a semi-circular div, which will have some content. It will be rendered but not visible to start with (using Angular 2). On a certain user action, hovering over another section of the screen, the div will appear, but I don't want to just use display:none/block, or hidden.

What I'm trying to do is have another div with similar css act as a mask and slide up to reveal the semi-circle div.

I have tried numerous ways, and it would be of no advantage to post that code here. I have animated it by changing it's position so it moves into view, but it seems like a ridiculous way to do it.

<div class="semi-circle">
<button class="add-button" >Add</button>
</div>

.semi-circle{
height:80px;
width:160px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:green;
}
.add-button{
position:absolute;
left: 65px;
top: 50px;
}


This is basically what it will look like

Answer

You can achieve this effect in CSS alone, with an ::after pseudo-element and a transition:

.semi-circle {
position: relative;
display: inline-block;
width:160px;
height:80px;
background-color: rgba(0,0,0,0);
border-radius: 90px 90px 0 0;
overflow: hidden;
}

.semi-circle::after {
content: '';
position: absolute;
display: block;
top: 80px;
left: 0;
width:160px;
height:80px;
background-color: rgb(0,255,0);
border-radius: 90px 90px 0 0;
transform: translateY(0);
transition: all 0.75s ease-out;
}

p {
display: inline-block;
width: 160px;
text-align: center;
}

p:hover ~ .semi-circle::after {
transform: translateY(-80px);
}
<p>Hover me</p>
<div class="semi-circle"></div>