WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Color display when hovering over images (7 posts)

  1. sharongolod
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 12 months ago #

    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;
    }
  3. kremin
    Member
    Posted 11 months ago #

    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.

  4. yuravw
    Member
    Posted 11 months ago #

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

  5. Andrew
    Forum Moderator
    Posted 11 months ago #

    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;
    }
  6. ana ramirez castillo
    Member
    Posted 6 months ago #

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

    Thanks!

  7. Andrew
    Forum Moderator
    Posted 6 months ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.