Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    colour tinting a thumbnail

    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?

    Thanks

    A

  • #2
    Regular Coder nolvorite's Avatar
    Join Date
    Dec 2006
    Posts
    176
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    "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.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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
    http://css-tricks.com/64-css-transpa...-all-broswers/

    Code:
    .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 */
    Code:
    <div class="thumb tint">
     <img src="" alt=""/>
    </div>
    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
    Last edited by Sammy12; 11-01-2011 at 12:55 AM.

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •