WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] How to remove hover on circles? (10 posts)

  1. Xeniya
    Member
    Posted 7 months ago #

    Hello,

    I made the circles linked to the pages according to this guide -http://wordpress.org/support/topic/put-test-inside-images-on-home-page?replies=3

    I am wondering how to remove hover effect from the circles? I don't want to be them black and white. I would like to see them in color all the time.

    Another question - How to change the distance between the circles?

    Thank you!

    Xeniya
    Website link: http://www.girlsxchlamydia.nl

  2. salsaturation
    Member
    Posted 7 months ago #

    Hi Xeniya

    If you don't already have a custom.css you should install a plugin like custom CSS plugin then add the following to the custom css area.

    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img,
    .blog .hentry a:focus img,
    .archive .hentry a:focus img,
    .search .hentry a:focus img  {
     filter: none;
    }
  3. Andrew
    Forum Moderator
    Posted 7 months ago #

    You may also need

    filter: grayscale(0);
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;

    And the OP may have set up a Child Theme already

  4. Xeniya
    Member
    Posted 7 months ago #

    @salsaturation

    I do have Custom CSS plugin but I am not sure I know how to use it. I just need to open it and paste this code there?

    @Andrew

    I am working in Child Theme. Do I need to paste the code that you wrote under the code that salsaturation wrote me in Custom CSS as well? What about the changing the distance?

    Sorry for questions but I am new here :)

    Thank you!

  5. salsaturation
    Member
    Posted 7 months ago #

    You can either paste it into the custom css area or just add it to your child theme style.css. Full code is

    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img,
    .blog .hentry a:focus img,
    .archive .hentry a:focus img,
    .search .hentry a:focus img  {
     filter: none;
    filter: grayscale(0);
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
    }
  6. Xeniya
    Member
    Posted 7 months ago #

    @salsaturation

    Ok, I pasted it in style.css. It works in IE but doesn't in Chrome. Is there a way to change it for Chrome as well?

  7. Andrew
    Forum Moderator
    Posted 7 months ago #

    Note: When your first issue is resolved and you do get to this question:

    Another question - How to change the distance between the circles?

    Can you start up a new thread about that?

  8. Xeniya
    Member
    Posted 7 months ago #

    @Andrew,

    Ok, I will. Sorry about that.

    However, my first issue is not resolved. The colors are changed in EI but not Chrome or Firefox. Is there a way to make it work in Chrome and Firefox as well?

  9. Andrew
    Forum Moderator
    Posted 7 months ago #

    Try this instead:

    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img,
    .blog .hentry a:focus img,
    .archive .hentry a:focus img,
    .search .hentry a:focus img,
    .blog .hentry a .attachment-home-post{
     filter: none;
     filter: grayscale(0);
     -webkit-filter: none;
     -moz-filter: none;
     -o-filter: none;
     -ms-filter: none;
    }
  10. Xeniya
    Member
    Posted 7 months ago #

    Thanks! It's working now!

Reply

You must log in to post.

About this Theme

About this Topic