Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #232888

    Hi.

    Every so often, a new portfolio item’s thumbnail does not accept the grayscale overlay I’ve placed using CSS. The current issue can be seen in the first row of http://kirindesigngr.com/portfolio There is a broken jpeg symbol over the thumbnail in Chrome as if something is wrong.

    I’ve already regenerated the thumbnail, changed the file name and uploaded three versions, and created a separate portfolio item with the same image in case something broke during the initial creation of the current item.

    This issue only occurs one in five uploads, but is extremely aggravating when it does, as nothing rational will fix it.

    Thanks for your help.

    #233066

    Hi KirinDesign!

    Thank you for using the theme. I hope you’re doing great.

    Please try to deactivate all plugins especially W3 Total Cache then test it again. Have you tried resaving the image to jpg on photoshop or any image editor? Upload it again after.

    Cheers!
    Ismael

    #233353

    I tried all of that. First, I disabled W3 Total Cache and reloaded the page. Then I disabled all my plugins and uploaded a .jpg version of the image. Still came out the same. I left the .jpg version up even though the thumbnail position is wrong to demonstrate the point.

    #233576

    Hey!

    Please post the list of plugins that you have on your end. Check if the greyscale version of the image is present on the wp-content/uploads/2014/03 folder. You can also fix it using CSS. Add this on Quick CSS or custom.css:

    .template-portfolio-overview.content div.portfolio-wrap.avia_sortable img {
    display: block;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray;
    -webkit-transition: all .6s ease;
    }
    
    .template-portfolio-overview.content div.portfolio-wrap.avia_sortable img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none; 
    }
    
    #top #wrap_all .filtered-image {
    display: none !important;
    }

    Regards,
    Ismael

    #234834

    The CSS worked – not sure why my old CSS was not working. Will close this out for now.

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

The topic ‘Grayscale Overlay not Affecting Thumbnails’ is closed to new replies.