Nałożenie tekstu na obrazek z grida przy użyciu CSS

Nałożenie tekstu na obrazek z grida przy użyciu CSS
YO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 540
0

Da się przy użyciu CSS nałożyć TEKST na obrazek z takiego grida: https://startbootstrap.com/template-overviews/thumbnail-gallery/ ?

czysteskarpety
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Piwnica
  • Postów: 7697
0

Najprościej podzielić row na 4 części/div, potem jako backgroud dać obrazek a na to div z text,
Możesz również wykorzystać carousel-caption: https://codepen.io/drawby/pen/NPoEvZ

  • Rejestracja: dni
  • Ostatnio: dni
0

Jeżeli obrazki dodane zostały za pomocą znacznika img to problem możesz rozwiązać zapewne na kilka sposobów, przedstawię ten, który jako pierwszy wpadł mi do głowy.

Opakuj obrazek w div lub znacznik figure. Wewnątrz div/figure ma znajdować się znacznik img oraz dodatkowy div lub figcaption w przypadku korzystania z figure. Tekst dodaj do div/figcaption. Następnie w CSS dla div/figure, który przechowuje obrazek i tekst ustaw pozycjonowanie relatywnie. Dla div/figcaption przechowujące tekst ustaw pozycjonowanie absolutne oraz właściwości top, left na 0 aby wyrównać do rodzica. Ustaw sobie jeszcze width i height na 100%. Opcjonalnie dodaj jeszcze flexboxa aby w łatwy sposób pozycjonować tekst.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.