On Hover Flip The Semi-circle

April 21, 2024 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><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title></head><body><divclass="main"><divstyle="height: 100px;"class="div-1"></div><divclass="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%);
}

<divclass="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%;
}

<divclass="main"><divclass="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:100px00;
}

.main:hover {
  padding: 00100px;
}

<divclass="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:100px00;
  transition:1s;
}

.main:hover {
  padding: 00100px;
}

<divclass="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;
}

<divclass="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;
}

<divclass="main"><divstyle="height: 100px;"></div><divclass="btm"></div></div>

Html5 Ready