On Hover Flip The Semi-circle

November 24, 2022 Post a Comment

I want to flip the semi-circle on hovering. The above code the bottom part of the circle is red colored what I want is just I want to make top part of the circle to be red on ho

Solution 1:

.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

Solution 2:

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>

Solution 3:

Try this.

.main {
  position: relative;
  height: 200px;
  width: 200px;
  border: 2px solid green;
  border-radius: 190px;
}

.semi-circle {
  position: absolute;
  position: absolute;
  border-bottom-left-radius: 200px;
  border-bottom-right-radius: 200px;
  background-color: red;
  height: 100px;
  width: 200px;
  top: 50%;
}

.main:hover .semi-circle {
  transform: rotate(180deg);
  top: 0%;
}

<div class="main">
  <div class="semi-circle">
  </div>
</div>

Solution 4:

Here is an idea relying on background-clip

.main {
  border: 2px solid green;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  box-sizing:border-box;
  background-color:red;
  background-clip:content-box;
  padding:100px 0 0;
}

.main:hover {
  padding: 0 0 100px;
}

<div class="main">

</div>

Where you can easily have transition:

.main {
  border: 2px solid green;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  box-sizing:border-box;
  background-color:red;
  background-clip:content-box;
  padding:100px 0 0;
  transition:1s;
}

.main:hover {
  padding: 0 0 100px;
}

<div class="main">

</div>

In case you want a translate animation, here is an idea with gradient:

.main {
  border: 2px solid green;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  background:linear-gradient(red,red) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
  transition:1s;
}

.main:hover {
  background-position:top;
}

<div class="main">

</div>

Solution 5:

you can see this example:

.main {
  border: 2px solid green;
  border-radius: 190px;
  height: 200px;
  width: 200px;
  position: relative;
  overflow:hidden;
}

.btm {
  border-bottom-left-radius: 190px;
  border-bottom-right-radius: 190px;
  background-color: red;
  height: 100px;
  position:absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transition: .3s;
}
.main:hover .btm {
top: 0;
  border-top-left-radius: 190px;
  border-top-right-radius: 190px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

<div class="main">
  <div style="height: 100px;">
  </div>
  <div class="btm">
  </div>
</div>

Html5 Programming Language