On hover flip the semi-circle
.main {
border: 2px solid green;
border-radius: 190px;
height: 200px;
width: 200px;
transition: all 0.5s ease;
}
.btm {
border-bottom-left-radius: 190px;
border-bottom-right-radius: 190px;
background-color: red;
height: 100px;
transition: all 0.5s ease;
}
.div-1 {
border-top-left-radius: 190px;
transition: all 0.5s ease;
border-top-right-radius: 190px;
}
.main:hover .div-1 {
background: red;
transition: all 0.5s ease;
}
.main:hover .btm {
background: white;
transition: all 0.5s ease;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main">
<div style="height: 100px;" class="div-1">
</div>
<div class="btm">
</div>
</div>
</body>
</html>I have added transition effects and used your code! Hope it'll help
You can achieve this easily like this using the linear-gradient(180deg, transparent 50%, red 50%);. You can swap the colors on hover at the main division.
Hope this is what you are looking for.
.main {
border: 2px solid green;
border-radius: 190px;
height: 200px;
width: 200px;
background: linear-gradient(180deg, transparent 50%, red 50%);
}
.main:hover {
background: linear-gradient(180deg, red 50%, transparent 50%);
}<div class="main">
</div>