Kolorowanie obrazka przy pomocy CSS

Question

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 ?

Comments

Pokaż kod.

---

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

---

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

---

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..

Answer 1

ja bym zrobił spana który byłby nałożony na ten obrazek i dał mu ten gradient a po najechaniu go usunął