Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 28, 2017 at 10:40 am #813733
    greenheart77

    I Tried this code but changes all the image containers of theme from grayscale to colour on mouse hover:

    #top .avia-image-container img { filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray;
    -webkit-transition: all .6s ease;}

    #top .avia-image-container img:hover { filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none; }

    I want to change only the container images of an specific page with id: 3257.

    Could you help me?
    Thanks very much.

    PS: I’m working in local.

    June 28, 2017 at 11:02 am #813744
    tjswarbs78

    Monring,

    Each page has a class that corresponds to the page ID.
    You can use this class as follows…

    .page-id-3257 .avia-image-container img { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
-webkit-transition: all .6s ease;}

.page-id-3257 .avia-image-container img:hover { filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none; }

    Give that a try and see what happens.
    Hope that helps

    TJ

    June 28, 2017 at 11:21 am #813749
    greenheart77

    Fixed! It works fine!
    Thanks very much for your help.

    June 28, 2017 at 3:33 pm #813877
    Nikko

    Hi,

    Glad that you fixed it. :)

    @TJ: Thanks for helping out :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Mouse hover from grayscale to color in specific page’ is closed to new replies.