2

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

JxM
  • 45
  • 1
  • 1
  • 5
  • Well, everything that I found points to use the ":before" selector and then applying background with gradient. – JxM Feb 01 '15 at 15:58
  • Somehow the StackExhange didn't show the code properly, check the corrected code above. – JxM Feb 01 '15 at 16:06

2 Answers2

6

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

Community
  • 1
  • 1
JMonit
  • 81
  • 2
4

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

sweet potato
  • 135
  • 1
  • 11
  • That would be perfect solution, but Joomla generates code, not me, so I can't really create new div. At least I don't know how. – JxM Feb 01 '15 at 17:01
  • You can add markup in the gallery plugin templates, but a better solution would be to look for another plugin which does what you want or build the viewer yourself. I can recommend the Caroufredsel script which has a lot of great image galleries which can also be customized to your liking. [link]http://coolcarousels.frebsite.nl/ – sweet potato Feb 02 '15 at 03:16