efekt przejścia koloru kafelka od lewej do brawej

Question

witam, jak zrobić, aby kolor kafelka wypełniał się od lewej do prawej? nie chodzi o płynną zmianę koloru, tylko tak jakby ten drugi kolor był by nasuwany na ten kafelek od lewej. dodam że chciałbym mieć taki efekt w hoverze.

Answer 1

Pozycja relatywna na ten kafelek i dodajesz pseudoelement before/after z pozycja absolutną :)

Comments

relative i absolute troche ogarniam, ale nie wiem nawed co to before i after. dasz jakiś przykłąd zrobienia tego?

---

https://codepen.io/anon/pen/eyrOGg

---

a w normalnym css'sie, bez prekompilatora?

---

ok, jak by ktoś chciał, normalny kod w css wygląda tak:

 

body {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  border: 2px solid red;
  cursor: pointer;
  color: black;
  transition: all 0.25s linear;
}
.item:hover {
  color: white;
}
.item:hover:before {
  right: 0;
}
.item:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%;
  background: red;
  z-index: -1;
  transition: all 0.25s linear;
}

pczywiście popodmieniajcie sobie klasy itp. @zgrybus dzięki za pomoc :)

---

Polecam przesuwanie elementów przy pomocy 'translate'

Answer 2

Bedziesz musial pobawic sie linear-gradient.

background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200% 100%; //tutaj podkerslasz aby background w przypadku 1 koloru zajmowal obszar przycisku.
background-position: left bottom;

:hover { background-position: right bottom; }

 

i wiadomo, ze powinienes ogarnac jeszcze

transition: all 0.6s ease;

 

Comments

Po co linear gradient? Wystarczy pseudoelement :)

---

ok, a jakbym chciał aby po wyjechaniu myszą background się nie resetował, tylko cofał a jak się najedzie znowu to się będzie wysuwał od miejsca, gdzie się chował?