WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Customiz'it CSS: wp-post-image grayscale hover (12 posts)

  1. ChrisFo
    Member
    Posted 8 months ago #

    I'm trying to add a grayscale effect on the following code (example):

    <section class="tc-thumbnail span4">
        <div class="thumb-wrapper ">
            <a class="round-div " title="News" href="news"></a>
            <img class="attachment-tc-thumb wp-post-image" width="270" height="210" alt="News" src="Logo.png"></img>
        </div>
    </section>

    I'd like to make the image grayscale, reverted to color by hovering over. I tried several CSS styling codes (see one code source). One sample:

    img {
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    }
    img.hover {
    filter: none;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    }

    I have two problems:
    1) when introducing the code for Firefox (SVG filter), the images are not shown anymore in Firefox.
    2) in Chrome the filter to grayscale works, but if I hover over, the image does not show up in colores.

    I think there is some CSS style collision, but I'm not able to figure it out.

  2. Andrew
    Forum Moderator
    Posted 8 months ago #

    It's not exactly greyscale but you could try this:

    .thumb-wrapper {
      background: black;
      display: inline-block;
    }
    
    .attachment-tc-thumb {
      opacity: .4;
    }
    
    .round-div:hover ~ .attachment-tc-thumb {
      opacity: 1;
    }

    http://cssdesk.com/8Kq2D

  3. Andrew
    Forum Moderator
    Posted 8 months ago #

    Btw to answer your questions

    1) when introducing the code for Firefox (SVG filter), the images are not shown anymore in Firefox.

    You need to load a SVG file to help Firefox understand this grayscale filter, like the one that the old Spun theme used http://themes.svn.wordpress.org/spun/1.07/inc/desaturate.svg .

    2) in Chrome the filter to grayscale works, but if I hover over, the image does not show up in colores.

    I'm assuming this is because you're using a class of "hover" instead of the pseudo selector, but I obviously can be wrong.

  4. ChrisFo
    Member
    Posted 8 months ago #

    Thanks for the nice short code! For my styling your solution is however too dark (blackish).
    But I really appreciate that you have provided useful code to adress the styling: applying to .attachment-tc-thumb and .round-div:hover ~ .attachment-tc-thumb the grayscale filtes work fine in Chrome.
    In Firefox I still have problems, as the image is not displayed in normal state, but when hovering gets showed (in color).

    EDIT: I will look into your second posting and hopefully find a solution also for Firefox. Thank you very much.

  5. ChrisFo
    Member
    Posted 8 months ago #

    I think I now know what was the problem: the Customiz'it CSS field probably does not encode properly some characters. Example in the final browser HTML file:
    <svg xmlns='http://www.w3.org/2000/svg'> (char encoding not shown here)
    Original code as intended:
    <svg xmlns=\'http://www.w3.org/2000/svg\'>

    I have now moved my experimental CSS code to a child theme, and it seems to work perfectly with the grayscale filter code also in Firefox.

    But I'm unable to address the whole article on hover instead of only ".round-div:hover" for changing the image back to color (same area as where the "image expansion effect" is triggered). I hope this is understandable and would be happy to reach my ultimate design customizring ;-)

    Thx

  6. Andrew
    Forum Moderator
    Posted 8 months ago #

    You'd need to link the page with the issue

  7. ChrisFo
    Member
    Posted 8 months ago #

    I'm sorry but I have the "experimental" WP project on a local WAMP system.

    I would like to trigger the hover filter grayscale effect, when the mouse moves over this code section

    <article id="post-243" class="post-243 post type-post status-publish format-standard hentry category-stand category-test category-experi tag-paper tag-public row-fluid">
        <section class="tc-thumbnail span4"> … </section>
        <!--    .thumb_class    -->
        <section class="tc-content span8">
            <header class="entry-header">
                <h2 class="entry-title format-icon"> … </h2>
                <div class="entry-meta"> … </div>
                <!--             .entry-meta             -->
            </header>
            <!--         .entry-header         -->
            <section class="entry-summary">
                <p> … </p>
            </section>
            <!--         .entry-summary         -->
        </section>
        <hr class="featurette-divider"></hr>
    </article>

    I tried to access this area with
    article:hover ~ .attachment-tc-thumb and
    article.hover ~ .attachment-tc-thumb and
    post:hover ~ .attachment-tc-thumb
    But I'm not enough trained with this advanced hover CSS.
    Thx for the support.

  8. acub
    Member
    Posted 8 months ago #

    That code doesn't work in all browsers. It has a lot of workarounds. You didn't copy important parts of it.

  9. ChrisFo
    Member
    Posted 8 months ago #

    Yayyy - I got it to work to my satisfaction in Chrome and Firefox. (use child theme and not Customiz'it CSS). However only by trying (looking at Customizr CSS code), not by understanding ;-)

    /* post-image grayscale to hover-color  */
    .attachment-tc-thumb {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    }
    .widget-front.hover .round-div ~ .attachment-tc-thumb,
    article.hover .round-div ~ .attachment-tc-thumb {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    }

    Thanks Andrew!!!
    I think cleaned up for obsolete code this could be (together with other filter effect options) a nice add to code-snippets ;-)

    Interestingly Mozilla does list the CSS filters nicely, but still not support them in latest Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

  10. Streamline
    Member
    Posted 8 months ago #

    Andrews answer is correct, but it will not work on Internet Explorer 10 and 11 versions because Microsoft removed the browsers native Grayscale filter support.

    Currently the only way to acomplish this is using either 2 images (one color, other B&W) or using JS + SVG solutions like this:

    // Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter
    
        $('img').each(function(){
            var el = $(this);
            el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
            var el = $(this);
            el.parent().css({"width":this.width,"height":this.height});
            el.dequeue();
        });
    this.src = grayscaleIE10(this.src);
    });
    
    // Quick animation on IE10+
        $('img').hover(function () {
            $(this).parent().find('img:first').stop().animate({opacity:1}, 200);
        },
        function () {
            $('.img_grayscale').stop().animate({opacity:0}, 200);
        }
    
    function grayscaleIE10(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
             }
         }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
        };
    };

    By the way here is a cross-browser friendly working Demo - Cross-Browser Grayscale image example using CSS3 + JS

  11. ChrisFo
    Member
    Posted 8 months ago #

    Thanks for this additional example Streamline!
    In my case I like to have "CSS-only" and MSIE is not a priority for me. I have seen suggestions that IE10+ may works if compatibility for old IE is forced with
    <meta http-equiv="x-ua-compatible" content="IE=9">
    but I havent't tried that out.

  12. Streamline
    Member
    Posted 8 months ago #

    ChrisFo - this will work, but is really not a good practice because of the fact that Microsoft will continue to update Internet Explorer and there definitelly will be a MSIE12 and 13 etc. and it seems that they have abandoned this grayscale CSS filter for good.

    So forcing the lates IE browsers like 10 and 11 to render like the old 9th one will get you up and running on the grayscale filter, but will cut off from the new features they will have included and updated in the latest versions of Internet Explorer. So this should be kept in mind :)

Reply

You must log in to post.

About this Theme

About this Topic