Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 7, 2017 at 6:20 pm #849172
    npmcgrew

    Hello,

    I found the following shortcode and like the way it performs. However, I would like to only use it on a specific image basis rather than throughout the whole site. The code is designed to have images show in grayscale and become color when hovering:

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

    #main img:hover { filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none; }
    .image-overlay { display: none !important; }

    Is there a particular way to apply this to a certain image? Unlike most other content types, I don’t think images have a post id so I’m a bit confused there.

    On a tangent, is this the best way to apply this idea? Or should I find a way to upload a black/white image and a color and have the hover correlate that way?

    Thanks in advance!

    September 8, 2017 at 12:26 pm #849558
    Rikard

    Hey npmcgrew,

    That is CSS, not shortcode. What page and what image do you want it to apply to?

    Best regards,
    Rikard

    September 8, 2017 at 1:26 pm #849576
    npmcgrew

    Hi Rikard,

    Thanks for the reply.

    You can see the effect in action here: https://fairwaysmembership.com/fairways-golf-membership/

    I like the effect on the stock photos that alternate left and right aligned. And I’m happy that it does not affect the header. However, I do not necessarily want the Fairways Logo (left of initial copy) or product images to show in grayscale and would rather they stay their original full color.

    I don’t mind applying the effect on an individual basis, but do not know how to assign the CSS to individual or a grouping of images.

    Thank you in advance!

    September 9, 2017 at 7:24 am #849871
    Rikard

    Hi,

    Ok, thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-3158 .av_one_fourth img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
-webkit-transition: all .6s ease;
}

.page-id-3158 .av_one_fourth img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none; 
}

    Best regards,
    Rikard

    September 14, 2017 at 3:09 pm #852078
    npmcgrew

    Rikard,

    Thank you! You’ve been a big help!

    September 14, 2017 at 3:19 pm #852087
    Yigit

    Hi,

    Glad Rikard could help! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Shortcode for Particular image instead of all’ is closed to new replies.