Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #190896

    Some images don’t fix so well over the real thumbnail (you can see a little bit of the color image below). Why this happens?

    PD: I asked this as a part of other questions but it was closed, should I ask problems 1 by 1?


    Hey eried!

    Can you post links to your website and point out the issues so we can inspect elements and provide you a more accurate solution



    Sure! I enabled the hover effect seconds ago (I have these effects disabled because of this):

    Mouseover here:



    Can you please enable the greyscale option? Add this on your custom.css or Quick CSS:

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



    OK it is enabled now:
    But the css does not fix the issue :/



    I think the problem is the imagesize. I noticed that all other images – i.e.×346.jpg×346.png

    have a size of 465×346 whereas this image:×346.png has a size of 394×346 and the image is smaller (394 vs 465px). Please make sure that the image width is at least 465 and this should fix the “shift” issue.



    Thanks Peter, I was thinking the same, something weird happens because if I change the CSS to relative position, it does fix the issue, but it is not greyscale anymore.

    I didn’t set these file names with the size, is the uploader part of the theme? I think maybe the png size routine is screwed up?



    The image is here:×346.png

    If you increase it to be at least 465 pixels wide then it should generate the two images at their correct value.

    Best regards,


    Thanks again for the answer,

    I can change the images but, what is the general guideline to add the photos?
    Because this one is wider than the size you specify and it is displayed with issues too



    The guideline is that the image must to be bigger than the defined thumbnail size or it must at least equal the thumbnail size. I.e. the portfolio thumbnail size is defined in functions.php with

    $avia_config['imgSize']['portfolio'] 		 	= array('width'=>465, 'height'=>346);						// images for portfolio entries (2,3,4 column)

    The photo is just 672 x 343 and thus wordpress won’t resize it because the height 343 is smaller than the defined height of 346px. WordPress won’t upscale the images but it will only crop/shrink images if they’re bigger than the defined thumbnail dimensions.

    Best regards,


    Thanks for the information Peter, updating the images now.


    We looking forward to hearing from you :)




    Well, I decided to disable the grey effect since the problem only happens when it is enabled, and in big resolutions only because in a tablet or phone grey effect looks ok.


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

The topic ‘Greyscale hover problem in portfolio’ is closed to new replies.