• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kolorowanie obrazka przy pomocy CSS

VPS Starter Arubacloud
0 głosów
388 wizyt
pytanie zadane 12 lipca 2018 w HTML i CSS przez ovy Nowicjusz (180 p.)
Witam,

Chciałbym aby każdy obrazek na mojej witrynie miał nałożony na siebie gradient. Po najechaniu na niego myszką gradient znika i pojawia się oryginalny obrazek.

Nie potrafię jednak nałożyć gradientu na obrazek. Próbowałem przez :before, position. Jednak nic nie wychodzi.

Może po prostu nie ma takiej możliwości w samym CSSie.

Obrazek ma być zaimplementowany w kodzie HTML. Używając samego CSS, czyli background-image potrafię to zrobić. Jakieś rozwiązania ?
komentarz 12 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)
komentarz 12 lipca 2018 przez ovy Nowicjusz (180 p.)

Nie wiem jaką część kodu Ci pokazać. Za każdym razem gdy mi się nie udawało kasowałem i próbowałem w inny sposób. 

Ale jeśli chcesz.. aktualnie mam zdefiniowany tylko gradient jaki ma być nałożony na obrazek i sam obrazek w HTML
 

<img src="img/imgAbout.jpg" />
img:before {
  content: "";
  background: linear-gradient(0deg, rgba(0, 80, 131), rgba(34, 185, 119);
  background-position: left top;
  opacity:0.4;
}

Próbówałem dodawać span przed img, :before w spanie, position.

Nie zapisywałem tego kodu, bo po co jeśli nie działa

komentarz 12 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)

O ile mi wiadomo, nie można używać ::before / :after na elemencie img. Polecam zamienić img na nie tyle div, co choćby figure (nie wiem co może semantycznie zastąpić obrazek, gdy chcesz go pokazać przez CSS żeby zastosować pseudoelement) i jemu w CSS dać background-image: url(/url/to/image).

Przykład po modernizacji Twojego kodu: https://codepen.io/ChrissP92/pen/xJGmWM

komentarz 13 lipca 2018 przez ovy Nowicjusz (180 p.)
Tak, również to zauważyłem.

Jednak zrobiłeś to za pomocą samego CSS i background-image. Ja chciałem aby obrazek znajdował się w HTML'u. Jednak natchnąłeś mnie i udało mi się to zrobić.
Udostępniam kod dla osób które również będą szukać rozwiązania tego problemu:

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

Teraz pozostaje mi dostosować to pod RWD..

1 odpowiedź

0 głosów
odpowiedź 14 lipca 2018 przez EdeX Mądrala (5,110 p.)
ja bym zrobił spana który byłby nałożony na ten obrazek i dał mu ten gradient a po najechaniu go usunął

Podobne pytania

0 głosów
1 odpowiedź 1,317 wizyt
pytanie zadane 30 października 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
0 głosów
1 odpowiedź 772 wizyt
pytanie zadane 24 czerwca 2018 w Egzaminy zawodowe przez MakaBresk Obywatel (1,060 p.)
0 głosów
2 odpowiedzi 706 wizyt
pytanie zadane 7 grudnia 2016 w HTML i CSS przez Bzytek Użytkownik (810 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...