Support » Theme: Cubic » Remove the color over hovered image

  • Hi to all,
    When I hover the mouse over a thumbnail on the front page it gets a shade of turquoise color. I don’t like it. I don’t like any color. So, can I turn it off?
    As a matter of fact, it would be much better if the images on the front page are black & white and when hovered you get real, in color version.

    Thanks for any help,
    Ammtar

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Ammtar – could you please provide a link to your site?

    This custom CSS will convert the blog grid images to greyscale in most browsers:

    .blog .entry-thumbnail img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    This will remove the coloured rollover effect:

    .hentry.has-post-thumbnail:hover .entry-link {
      opacity: 0;
    }

    And finally, this will remove the greyscale effect on hover:

    .hentry.has-post-thumbnail:hover .entry-thumbnail img {
      -webkit-filter: unset;
      filter: unset;
    }

    Keep in mind that filter effects do not work in Internet Explorer:
    http://caniuse.com/#feat=css-filters

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    The site is cejfing.com
    Probably will go with child theme. I hear a lot of Jetpack plugin as a plugin #1, but many recently are trying to avoid it because it force you to connect to WP.com?!? Don’t know much about the whole situation, just read recently.

    Thanks Kathryn, I appreciate your help,
    ammtar

    IT WORKS PERFECT!!!! 😀
    Thanks again Kathryn! 🙂

    ammtar

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    You’re welcome. 🙂 It’s quite a nice effect on your site!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    A connection to WordPress.com is needed to use certain Jetpack modules, to leverage their servers for things you wouldn’t want to run on your own hosting, such as an Elasticsearch instance for Related Posts or Photon for an image content-delivery network.

    If for some reason you prefer not to use those modules and make the WordPress.com connection, you can still use the Jetpack modules that don’t require a connection, including the Custom CSS editor. Just put Jetpack in development mode to do that.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove the color over hovered image’ is closed to new replies.