Pytanie Etykieta na zdjeciach

Witam.. mam takie pytanko jak dodac etykiety na zdjeciach , chodzi mi o takie niby przyciski na zdjeciach.

Tworze "porownywarke esklepow" i chcialbym dodac na zdjeciu np Nike takie "etykiety" jak Buty / Dresy / Odziez / Zegarki itp.

Jest ktos w stanie mi pomoc i podeslac jakis poradnik / napisac mi to / wspomoc jak to mozna zrobic ? 

obczaj position absolute oraz właściwość transform o ile dobrze zrozumiałem o co ci chodzi. 

@imgkasa No niestety nie masz racji. Przy kilku tagach robi się to niewygodne po prostu, mimo wykorzystania transform. Tutaj najlepiej nie dawać obrazka jako img, ale jako background diva, w którym umieścimy etykiety.

<div id="nike">
  <span class="etykieta">Bluzy</span>
  <span class="etykieta">Buty</span>
  <!-- i tak dalej -->
</div>

#nike {
  background-image: url(nike.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 20vh;
  width: 20vh;
}

#etykieta {
  background-color: black;
  color: white;
  padding: .25rem;
}

Tutaj wartości liczbowe - height, width i padding można podmienić. To jest przykładowe rozwiązanie problemu.

Podeślij to co masz i to czego oczekujesz to się pomoże.

@krzmaciek

O takie cos mi chodzilo , tylko pytanie , na responsivie bedzie dzialalo to dobrze ? 

Oczywiście. To z img miałbyś problem w RWD, czyli z responsywnością. Jakbyś chciał takie tagi przesunąć na dół tego diva #nike to dajesz mu display: flex; a na elementy (te tagi) dajesz align-self: flex-end; Nie wiem czy znasz i używasz flexboxa, ale bardzo go polecam - rozwiązuje problemy o których ktoś wcześniej nie pomyślał. Zamiast bawić się w floaty i inne masz proste narzędzie do ogarnięcia wielu layoutów.

P.S. Dodatkowo do tych divów z id np. #nike dodaj 

background-position: center;

Tak, żeby obrazek był wycentrowany (background obetnie to co się nie mieści na brzegach obrazka tak, żeby zawsze dostosowywał wielkość do rozmiaru ekranu). Wartości wielkości tych divów, których style podałem wyżej zmień na własne potrzeby i w zależności tego jak te elementy obok siebie układasz - śmiało używaj wartości procentowych, vw i vh - czyli tych, które do tego zastosowania pasują. A najlepiej w ogóle użyć tutaj flexa. Na element przechowujący te divy typu #nike, #puma itp. daj display: flex; a samym elementom (wszystkim) możesz dać jednakowe klasy, a tą klase ostylować na flex-grow: 1; i wtedy ci się będą elementy dostosowały (rosły) wraz z wielkością ekranu. Dodatkowo właściwość flex-wrap: wrap; nadana na element rodzica tych elementów (tzn. rodzica elementów #nike itp.) pozwoli im (w razie kiedy ekran byłby za mały) układać się pod sobą.