Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #10736

    Hey, I’ve the apparently known problem with the greyscale portfolio thumbnail image sizing a raw pixel larger than the colored thumbnail.

    I’ve the issue with FF 11.0 but it work with latest Safari. Thumbnail image is uploaded @ the size you say it works quite fine.

    Is there an issue to this ? CSS trick ?



    I can give you the URL in a private message if you want.

    I’m getting always the different size between grey and color thumbs; On the last portfolio entry, it give me an annoying horizontal border grey line depending on the width of my Firefox window.


    Hi there,

    I am having the same problem. When I was using the portfolio just to show photos it was not a problem, but now I have some photos and some videos with posterous image and it is not working ok. The gray image is smaller than the coloured thumbnail….

    Any idea?

    thanks again


    Silviall, are you experiencing this using Firefox ? It work nicely with Safari & Chrome (no IE test for the moment !)


    Hi Joolz,

    You can send me the link at DevinVinson(at) Please include a link to this thread or my spam filter will grab it :)

    You can also try regenerating the thumbnails with to see if that fixes the issue in Firefox.




    I have this problem also and the above didnt fix it. Whats the solution? Its pretty important for me to get this fixed!


    This happens in firefox, chrome and internet explorer. It isnt related to the actual thumbnail since it uses the greyscale canvas effect to make the thumbnail grey. Its a issue in the code somewhere, question is there a quick work around until you update the template?



    Try to drop this line on your custom.css.

    #top #main .greyscale-image {
    width: 100%;
    height: auto;

    If the image overflowed, maybe you can try to fix it by dropping this. Just in case.

    li.featured {
    overflow: hidden;

    Not sure if this will help but you can try.


    The above help didnt change anything. Also i noticed all the images arent the same size and one of the containers for sacrator website isnt displaying in the way it should. Is there a way that I can have all the images the same size as well as the containers? A link to my portfolio images can be found here:



    I really don’t know what’s causing this. Please add this snippet on your header.php. Look for

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>

    Then add this line below.

    <script type="text/javascript">
    $(document).ready(function() {
    var widthToFill = $('.#top .slideshow li img').width();
    $("#top #main .greyscale-image").width(widthToFill);





    Looks like that didn’t fix it either… :( This is really important to fix as soon as possible!


    *bump* I really need this fixed soon! :(




    I think this post answers the question: – because of the way how the effect works you always need to load the “full size” version of the greyscale image.


    Ismael, for me the #top #main .greyscale-image {

    width: 100%;

    height: auto;

    } fixed the issue in FF. Thanks


    Hi Joolz,

    Glad to hear that it worked. :)

    Best Regards,


Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Trouble with size of the greyscale thumbnail image a:hover effect’ is closed to new replies.