WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] How to make circles Hover grey when active? (8 posts)

  1. dubmanifesto
    Blocked
    Posted 7 months ago #

    Hi dear community,
    I'm customizing a spun theme -amazing work of the developer-designer.

    First I've changed the circles default color, now they have color always.

    Now I want them to fade into grey when the mouse arrow is on them.

    I can't find the way to do it, can you please give me some hint?

    Thanks community!!

    peace

  2. Andrew
    Forum Moderator
    Posted 7 months ago #

    Have you tried:

    .hentry.no-thumbnail:hover {
    
    }

    ?

  3. dubmanifesto
    Blocked
    Posted 7 months ago #

    Thaks for your help Andrew, I tried some attempts, but cannot make it work...

    What should I add inside the {} to make active circles fade grey when the mouse is on them?

  4. dubmanifesto
    Blocked
    Posted 7 months ago #

    Sorry, what I want is that the circles with images go greyish or any other tone...

    the url is http://indianartblog.com/

  5. Andrew
    Forum Moderator
    Posted 7 months ago #

    What did you try?

  6. dubmanifesto
    Blocked
    Posted 7 months ago #

    I'm a beginner, I did this:

    .blog .hentry a .attachment-post-thumbnail, .archive .hentry a:hover .attachment-post-thumbnail, .search .hentry a:hover .attachment-post-thumbnail {
    filter: url("inc/desaturate.svg#greyscale");
    height: 100%;
    opacity: 0.6;
    transition: all 1s ease-in-out 0s;
    }

    and then what u suggested, but it doesnt change grey when mouse is on the circle:

    .hentry.no-thumbnail:hover {
    filter: url("inc/desaturate.svg#greyscale");
    height: 100%;
    opacity: 0.6;
    transition: all 1s ease-in-out 0s;
    }

    many thanks for the help!!

  7. Andrew
    Forum Moderator
    Posted 7 months ago #

    What is it you're trying to change again, the background colour?

  8. dubmanifesto
    Blocked
    Posted 7 months ago #

    What I'm trying to change is to add a greyscale filter to the circles when they mouse is on them (hover, active)

    I finally did it but only works in Mozilla Firefox, in CHrome is not rendering ok.... i suspect this is not the right way to do it.

    .blog .hentry a:hover .attachment-post-thumbnail, .archive .hentry a:hover .attachment-post-thumbnail, .search .hentry a:hover .attachment-post-thumbnail {
    border-radius: 217px;
    box-shadow: 0 0 0 #000000;
    filter: url("inc/desaturate.svg#greyscale");
    opacity: 0.9;
    position: relative;
    transition: all 8s ease-in-out 0s;
    -webkit-transition: -webkit-filter .3s ease-in; /* chrome & safari */
    -moz-transition: filter .3s ease-in; /* firefox and other gecko-based */
    -ms-transition: filter .3s ease-in; /* ie 10+ */
    -o-transition: filter .3s ease-in; /* opera */
    transition: filter .3s ease-in; /* w3 (future standard) */

    }

  9. dubmanifesto
    Blocked
    Posted 7 months ago #

    Added to the code

    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

    and now it's rendering ok in both browsers!!!

Reply

You must log in to post.

About this Theme

About this Topic