Witam,
mam taki kod : https://codepen.io/anon/pen/mKBRPb
Problemem jest to, że po sekundzie dodaje mi klasę hidden do wczesniej wylosowanej np. dog , czyli jest class = "dog hidden" , ale bierze mi tylko background-image z dog , a ja chwilowo potrzebuje to zasłonić przez background-image z klasy hidden.
Pozdrawiam i życzę miłego dnia.
Zawsze w klasie .hidden możesz dać !important przy wartości danego atrybutu.
Czy takie coś Cie zadowala?
Bardziej eleganckie i uniwersalne od tego, co napisał @axelbest, będzie zmiana w CSS, w linii 18tej:
.hidden.hidden {
Jest to lepsze dlatego, że !important jest takim działem ostatecznym, jak już nic innego nie pomaga. Jeśli użyjesz go, to nie znajdziesz już nic mocniejszego od !important.
Natomiast stosując powtórzenia nazwy klasy możesz stopniować ważność selektorów dowolnie. .hidden.hidden.hidden będzie jeszcze ważniejsze od .hidden.hidden. Dodatkowo, !important musiałbyś powtarzać przy każdym atrybucie, na którym ci zależy, a powtórzenie nazwy klasy działa dla wszystkich wymienionych atrybutów.
Jeszcze jedną opcją jest przeniesienie tego fragmentu:
.hidden {
background-image: url("img/background_card.svg");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
background-color: #0f6a39; }
Na koniec pliku - tak, by znalazł się za .dog, .cat i resztą.