``````<div class="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>``````
``````.inverted-1 {
background:
background-size: 230% 100%;
background-position: right;
background-repeat: no-repeat;
transition: 1s linear;
}
.inverted-1:hover {
background-position:left;
}

.inverted-2 {
background:
background-size: 100% 200%;
background-position: bottom,top;
background-repeat: no-repeat;
transition:0.5s;
}
.inverted-2:hover {
background-position: top, bottom;
}

.inverted-3 {
background:
#000;
background-size: 100% 200%;
background-position: top;
background-repeat: repeat-x;
transition: 0.3s,background-position 0.3s 0.3s;
}
.inverted-3:hover {
background-size: 15% 200%;
background-position: bottom;
transition: 0.3s,background-size 0.3s 0.3s;
}

.inverted-4 {
background:
conic-gradient(from -45deg at 50% calc(5*100%/6),#fff 90deg, #000  0) calc(0*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(5*100%/6),#000 90deg, #ffff 0) calc(0*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(4*100%/6),#fff 90deg, #000  0) calc(1*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(4*100%/6),#000 90deg, #ffff 0) calc(1*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(3*100%/6),#fff 90deg, #000  0) calc(2*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(3*100%/6),#000 90deg, #ffff 0) calc(2*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(2*100%/6),#fff 90deg, #000  0) calc(3*100%/3) var(--_d, 100%),
conic-gradient(from -45deg at 50% calc(2*100%/6),#000 90deg, #ffff 0) calc(3*100%/3) var(--_d, 100%);
background-size: calc(100%/4) 600%;
background-repeat: no-repeat;
transition: 1s linear;
}
.inverted-4:hover {
--_d: 0%;
}

.inverted-5 {
background:
conic-gradient(from -135deg, #fff 0 90deg, #000 0),
conic-gradient(from -135deg, #000 0 90deg, #ffff 0);
background-size: 200% 100%;
background-position: right;
transition: 0.5s;
}
.inverted-5:hover {
background-position: center;
}

.inverted-6 {
background:
conic-gradient(            #fff 0 90deg, #fff0 0) bottom left,
conic-gradient(            #000 0 90deg, #fff0 0) bottom left,
conic-gradient(from  90deg,#fff 0 90deg, #fff0 0) top left,
conic-gradient(from  90deg,#000 0 90deg, #fff0 0) top left,
conic-gradient(from 180deg,#fff 0 90deg, #fff0 0) top right,
conic-gradient(from 180deg,#000 0 90deg, #fff0 0) top right,
conic-gradient(from -90deg,#fff 0 90deg, #fff0 0) bottom right,
conic-gradient(from -90deg,#000 0 90deg, #fff0 0) bottom right,
#000;
background-size: 202% 202%;
transition: 0.5s;
}
.inverted-6:hover {
background-position: center;
}

.inverted-7 {
color:#0000;
background:
#000;
background-size: 0% 0%;
background-position: bottom;
background-repeat: no-repeat;
transition: 0.5s;
}
.inverted-7:hover {
background-size: 110% 60%;
}

.inverted-8 {
background:
repeating-linear-gradient(-45deg, #fff 0 15px, #000  0 30px),
repeating-linear-gradient(-45deg, #000 0 15px, #0000 0 30px),
#000;
background-size: 500px 500px;
background-position: left 0 top -500px;
background-repeat: no-repeat;
transition: 0.5s linear;
}
.inverted-8:hover {
background-position:left -100px top -400px;
}

/**/
[class] {
color:#0000;
display:inline-block;
font-weight: bold;
vertical-align: middle;
font-size:40px;
font-family:sans-serif;
margin:25px;
cursor:pointer;
}

body {
text-align:center;
}``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.