Menu
I want to flip the semi-circle on hovering.
.main {
border: 2px solid green;
border-radius: 190px;
height: 200px;
width: 200px;
}
.btm {
border-bottom-left-radius: 190px;
border-bottom-right-radius: 190px;
background-color: red;
height: 100px;
}<div class="main">
<div style="height: 100px;">
</div>
<div class="btm">
</div>
</div> 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 hovering.
Any help will be Appreciated.
448
asked Sep 02 '19 03:09
.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
123
answered Nov 08 '22 15:11
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
