CODEWITHSUNDEEP
htmlcsshovercss-animationsgeometry
stephjhonny
stephjhonny

Reputation: 225

Change circle background on hover using css animation

i have a circle its background color is set to red, i want to change its background on hover using css animation how can i do that? here is my code:

.circle{
  background-color: red;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  }
<html>
<body>
<div class="circle"></div>
</body>
</html>

Upvotes: 2

Views: 21226

Answers (3)

Ramesh S
Ramesh S

Reputation: 804

.circle{
  background-color: red;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  }
.circle:hover{
      background-color: green;
       transition: all 0.5s ease;
 

background-position: left bottom;
  }
<html>
<body>
<div class="circle"></div>
</body>
</html>

Upvotes: 3

Wisely D Cruizer
Wisely D Cruizer

Reputation: 1149

For Changing color using css animation try using the code below.

.circle 
 {
 border-radius: 50px;
 height: 100px;
 width: 100px;
 background: linear-gradient(to right, blue 50%, red 50%);
 background-size: 200% 100%;
 background-position: right bottom;
 transition: all 2s ease;
 }

 .circle:hover {
  background-position: left bottom;
  } 
<div class="circle"></div>

Upvotes: 5

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

HTML

<div class="circle"></div>

CSS

.circle {
  background-color: red;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  position: relative;
  overflow: hidden;
}
.circle:after {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  transition: all ease 0.5s;
  content: "";
  background-color: blue;
}
.circle:hover:after {
  width: 100%;
  transition: all ease 0.5s;
}

Hope this will solve the issue.

https://jsfiddle.net/Lijin/06cwf3wq/2/

Upvotes: 3

Related Questions