Support » Theme: Spun » Color display when hovering over images

  • Resolved sharongolod

    (@sharongolod)


    I was wondering if there’s a way of having all images display in colour and only when you hover over them have them display a colour. You can see an example of what I mean in this url: http://aritzia.com

    Please scroll down a bit on the site to see what I’m talking about.

    Thank you,

    Shar

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    If you have neither a Child Theme or Custom CSS plugin, install this Custom CSS Manager plugin and use its section of the dashboard to hold this CSS:

    .blog .hentry a .attachment-post-thumbnail,
    .archive .hentry a .attachment-post-thumbnail,
    .search .hentry a .attachment-post-thumbnail {
    	border-radius: 180px;
    	filter: none;
    	-webkit-filter: none;
    	-webkit-filter: none; /* Older versions of webkit */
    	-moz-filter: none;
    	-o-filter: none;
    	-ms-filter: none; /* IE 10 */
    	filter: none; /* IE 9 */
            opacity: 1;
    }
    
    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: gray;
            filter: url('inc/desaturate.svg#greyscale');
            opacity: .8;
            -webkit-opacity: .8;
            -moz-opacity: .8;
    }

    I do a Child Theme AND a CSS plugin for maximum confusion ; ) I entered this into the CSS Manager and it worked like a charm! Many thanks.

    I places the code, but this is not working in Firefox.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    The code should be this instead:

    .blog .hentry a .attachment-post-thumbnail,
    .archive .hentry a .attachment-post-thumbnail,
    .search .hentry a .attachment-post-thumbnail {
    	border-radius: 180px;
    	filter: none;
    	-webkit-filter: none;
    	-webkit-filter: none; /* Older versions of webkit */
    	-moz-filter: none;
    	-o-filter: none;
    	-ms-filter: none; /* IE 10 */
    	filter: none; /* IE 9 */
            opacity: 1;
    }
    
    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            opacity: .8;
            -webkit-opacity: .8;
            -moz-opacity: .8;
    }

    and would it be possible to do the reverse? to appear images in black and white and when hover it turn coloured.

    Thanks!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Ana, the theme does this by default. If you’re having an issue please create your own thread: http://wordpress.org/support/theme/spun#postform

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Color display when hovering over images’ is closed to new replies.