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! :)

Solution 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

Solution 2

Create an overlay div:

<div class="image">
  <img class="pg-image" src="http://i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2015/1/30/1422631112598/2340075f-69ad-443b-9770-2dd03049f474-bestSizeAvailable.jpeg" alt="Something">
</div>
<div class="overlay"></div>

.overlay {
    background-color: rgba(55, 155, 55, 0.5);
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    right:0;
    top:0;
    z-index: 1;
}

.image{position: relative;}

Fiddle