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

Kolorowanie obrazka przy pomocy CSS

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
321 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,440 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,440 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,030 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,041 wizyt
pytanie zadane 30 października 2015 w HTML i CSS przez Krzysiek_34 Mądrala (5,970 p.)
0 głosów
1 odpowiedź 524 wizyt
pytanie zadane 24 czerwca 2018 w Egzaminy zawodowe przez MakaBresk Obywatel (1,060 p.)
0 głosów
2 odpowiedzi 441 wizyt
pytanie zadane 7 grudnia 2016 w HTML i CSS przez Bzytek Użytkownik (680 p.)

90,303 zapytań

138,899 odpowiedzi

311,088 komentarzy

60,019 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...