View Full Version : colour tinting a thumbnail

10-31-2011, 09:07 PM
Hi, i'm not sure this is posted in the correct place so feel free to move it if you think otherwise! I have a fully working WP managed website and I am using a Nextgen plugin for the gallery, I am basically wanting to tint my thumbnails but cant figure out a good way of doing it...The thumbs need to be clickable and im not fussed about a rollover effect, I just need to devise a way of tinting them either on upload or a filter through css?

Anybody have a good idea?



10-31-2011, 09:28 PM
it seems like you might have to use some CSS3 stuff there based on what you're trying to use as the filter, which I don't really recommend using.

11-01-2011, 12:40 AM
"Filter" is not specific nor helpful. If you just want to add a single colour you could just layer a semi-transparent PNG on top.

11-01-2011, 12:50 AM
or you could just set the background of the parent to a certain color or image and use opacity on the <img>. opacity actually has great browser support

.tint { background: #333 url('stripes.png') repeat;
.tint img { opacity: .9 ...; } /* you can add as much browser support as you like
the background (#333 and stripes) will be seen through the image */

<div class="thumb tint">
<img src="" alt=""/>

the reason I think this method is preferable is because you don't use an extra tag for the tint, and you can use -webkit-transformation: .5s linear opacity;, which gives a nice slow transition to full opacity

11-01-2011, 12:04 PM
Thanks for the ideas guys, much appreciated, I managed to get it kind of working, but the problem now lies with the nextgen scroll plugin and how it generates thumbs, meaning if i dont fill the full width with thumbnails the coloured box just carries on until it reaches the full width, i'm not sure whether there is a javascript solution to this or whether there is a server side plugin that would be able to change the colour of images upon upload! It's driving me crazy!