Overlay gradient over image with CSS

Question

I'm getting frustrated with this thing. I'm using Joomla and Phoca Gallery which generates this part of the code:

<img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="Something">

What I want to do is to overlay gradient over the image that is shown as thumbnail on the website (the image with .pg-image class). As the image is not background image, all solutions for overlaying gradients I found on the internet so far are not working.

Any ideas?

Thanks! :)

Answer 1

CSS :after not adding content to certain elements

This cannot be done only by img tag you need to add extra markup to it like enclosing it in a div.

<!-- http://www.jmonit.com -->
<div class="pg-image">
<img src="http://www.jmonit.com/kettlezoozebraGZ1/wp-content/uploads/2010/09/memcarrd_HD.jpg" alt="Something">
</div>

See an example here

http://codepen.io/jmonit/pen/gbGayg